Vue.js — Mencoba & Belajar Composition API RFC
Halo teman teman, di tulisan saya kali ini membahas tentang sebuah module yang mungkin sedang hangat di bicarakan atau mungkin kalian sudah mendengarnya sedikit dikit.
Yup, “Composition API RFC”, module ini kabarnya bakal resmi tersedia secara cuma cuma di Vue 3 nantinya.
Di Tulisan saya kali ini saya menggunakan Vue 2 dulu, karena Vue 3 masih rilis beta saat tulisan ini di publish.
Module ini punya repository terpisah dari vue 3 yang memungkinkan kita untuk mencoba nya di Vue 2 ataupun Nuxt.
Table Of Content
- Apa itu Composition API
- Hello World
- Ref vs Reactive
- Multi-feature components & Code Organization
- Apa Saja API yang disediakan?
Composition API
Apa sih “Composition API” ini ? di lihat dari official site module ini, mereka menjelaskan Composition API adalah :
Introducing the Composition API: a set of additive, function-based APIs that allow flexible composition of component logic.
Biar kalian mudah untuk paham, kasarnya Composition API ini adalah module yang memberikan api atau fungsi tambahan untuk kita dalam membuat projek vue js.
Apakah Sangat Berguna? Vue RFC menjawab berikut :
“the problems [the composition API] aims to address appear primarily in large scale applications”.
Mereka mengatakan, Composition API ini berguna di aplikasi dengan skala besar. Mengapa? Konsep dari Composition API sendiri adalah memisahkan beberapa logical concerns dan bahkan membuat sekumpulan fungsi itu Reusable.
Salah satu contoh akibat penggunaan Composition API adalah adanya refaktor kode yang begitu signifikan, coba perhatikan gambar perbedaankode berikut dari salah satu sumber :
Apa yang kalian lihat di gambar sana? yah, kasarnya terjadi sebuah grouping yang lebih rapi lagi.
Di Vue2 kita mengenal Sebutan “Options API”, yak kalian sering menggabungkan 2 logical concerns yang berbeda seperti berikut :
Terkadang kalian juga sadar, konsep penulisan vue yang seperti terlalu memberatkan kita saat aplikasi sudah bertambah besar. Semua logic nya tercampur tidak karuan.
Bahkan seseorang yang membaca kode kita, mungkin mereka makin kesulitan lagi karena tidak tahu mana saja state dan methods yang terhubung?
Maka dari itu kita dikenalkan dengan Composition API. Composition API akan membantu kita membangun aplikasi vue yang lebih rapi lagi, dengan pendekatan grouping berdasarkan logical concerns kita nantinya.
Limitasi di Vue 2
Setelah mengetahui sedikit sedikit dari tulisan saya diatas, kita bisa tarik kesimpulan. Apa saja limitasi di Vue 2 ?
- Ketika aplikasi bertambah besar, kode di component semakin banyak. Itu membuat kode Vue kita semakin jelek untuk dilihat
- Terbatasnya dukungan terhadap typescript
- Penggunaan Reuse Code Patterns yang memiliki drawbacks
- Sulit Di Perbaiki atau dilihat oleh orang lain
- dan sebagainya….
Vue 3 dengan Composition API nya is a FUTURE????
Vue 3 disebut — sebut sebagai future ? salah satunya karena alternative nya yaitu Composition API ini. Setelah melihat keterangan diatas, apakah kalian makin tertarik dengan penggunaan Composition API ini di Vue 3?
Composition API memang akan ada di vue 3 secara built in, tapi kita bisa mencoba nya dan menggunakanya di Vue 2 atau di Nuxt.
Penggunaan Composition API ini adalah perubahan yang besar menurut saya, dan sekarang pattern kita dalam penulisan kode proyek Vue akan semakin berubah dan tertangtang untuk kembali mempelajarinya.
Jadi, mari kita coba pasang Composition API di Vue 2 / Nuxt kita.
Instalasi
ALERT!!!
Di vue3 nanti, kalian tidak perlu menginstall nya karena dikatakan dari sumber nya bahwa di Vue 3 sudah include composition api, dan untuk menggunakanya cukup import dari vue kalian.import { reactive, ref, watch, computed } from ‘vue’
pertama — tama, buatlah project vue js. Kalian juga bisa menggunakan Nuxt.
vue create belajar-vue-composition-apisetelah berhasil, mari kita buka folder project fresh vuejs kita
cd belajar-vue-composition-apisekarang, kita pasang module nya :
# menggunakan yarn :
yarn add @vue/composition-api# atau npm :
npm install @vue/composition-api
Seperti biasa saat kita memasang module di Vue js, kita use module tersebut di src/main.js :
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
Hello World
Mari kita coba mengucapkan Hello World pada Composition API !
Sekarang mari kita hapus semua kode yang ada di src/App.vue lalu tulis kode berikut :
Wih Apa itu ? kok aneh dan tidak sesuai dengan konsep penulisan Vue kita selama ini ? Tenang tenang, mari kita bahas satu satu.
Semua fungsi api nya disediakan dalam @vue/composition-api , jadi untuk menggunakan nya kita akan mengimport nya :
import { ref, reactive } from '@vue/composition-api'Composition API menggunakan fungsi utama yang bernama setup :
export default { setup () {
}}
jadi Setup ini adalah fungsi yang akan dijalankan secara otomatis oleh Vue dalam sebuah lifecycle yang bernama “before create”.
Setup ini menangkap sebuah return value dimana return value tersebut akan digabungkan ke dalam render Vue Component nantinya.
Jadi di Setup ini kita akan berikan semua logic kita, jika di Vue 2 kita menulis seperti berikut :
export default { data: {
user: {
nama: 'Alfian Dwi',
age: 19
},
count: 1
}
}
Maka di Composition API kita menulisnya :
import { ref } from '@vue/composition-api'export default {setup () {
const count = ref(1)
const user = reactive({
name: 'Alfian Dwi',
age: 19
}) return {
count,
user
}
}
}
Kalian sudah bisa melihatnya? di setup tersebut kita mengembalikan semua value yang nantinya akan kita gunakan. Seperti state “user” dan “count” tersebut.
Berarti kita tidak mendefinisikan “data”, “methods”, “computed” lainnya ?Yup, semua itu digantikan dengan konsep function seperti yang kalian lihat.
ehhh tunggu - tunggu, apa itu tadi ref() dan reactive() ?
Seperti yang saya katakan, Composition API menyediakan banyak fungsi untuk menggantikan konsep Vue 2 sebelumnya. ref dan reactive adalah salah satu fungsi untuk menggantikan options api data yang kita biasanya gunakan di Vue 2 sebelumnya.
karena konsep Vue mempunyai data yang reactivity, Jadi ketika kalian ingin menggunakan sebuah state gunakan ref atau reactive untuk membuat nya.
<div>
{{ count }}
</div><script>
import { ref } from '@vue/composition-api'
export default {
setup () {
const count = ref(1)
return {
count
}
}
}
Setelah kalian me return didalam fungsi setup, kalian bisa menggunakan state count didalam template html kalian seperti bisanya {{ count }}
Oh iya, fungsi setup juga mendapat parameter berupa :
setup (props, context) {
....
}Isi dari context apa ? isinya berisi beberapa value dari refs , parents , lalu ada juga root untuk menggantikan this di Vue 2.
Jika di Vue 2 options api kalian ingin memanggil plugin lain misal Vuex seperti ini :
const user = this.$store.state.usermaka di Composition API kalian bisa menggunakan :
setup (props, { root }) {
const user = root.$store.state.user return {
user
}
}
Ref atau Reactive ?
Keduanya sama sama membuat sebuah variable dapat reaktif.
- Ref
Ref digunakan saat penggunaan data primitif seperti Boolean, String, Integer. Sebagai gantinya, Ref membuatkan sebuah object nilai.value - Reactive
Reactive akan mengambil sebuah objek dan mengembalikan reaktif nya ke object aslinya.
Perlu kalian perhatikan, ketika menggukana Ref didalam setup js kita, maka kalian perlu menggunakan data.value untuk mengeset atau mengget nya.
Sebagai contoh :
import { ref } from '@vue/composition-api'setup () {
const count = ref(1) // set count
count.value = 5 // get count
console.log(count.value) // output : 5 return {
count
}
}
Tapi ketika kalian menggunakanya di dalam template html kalian, kalian tidak perlu mengambil nya melalu {data}.value lagi, cukup :
<div>
{{ count }}
</div>Code Organization
sesuai yang saya sebutkan diatas, salah satu feature utama yang kita kejar adalah Kode yang tergorganisasi dengan baik di projek Vue kita.
Bayangkan dalam satu components kalian, kalian punya banyak sekali logic, sebagai contoh kita akan gunakan 2 perumpaan logic dasar.
Bayangkan kalian punya 2 fungsi utama, seperti funsi untuk menampilkan data ke Tabel dan Form untuk menambahkan data ke Tabel.
Berikut :
Kalian bisa lihat dari aplikasi todo-list sederhana diatas, terjadi sebuah code organization. Berikut :
setup () {
const { name } = useOurTable()
const { ... } = useOurForm() return {
name
}
}function useOurTable () {
const name = ref('')
return {
name
}
}function useOurForm () {
...
}
Dengan cara ini, kode terlihat begitu rapi dan terorganisasi, dimana kita memisahkan logic dasar dari aplikasi lalu membaginya.
Seperti contoh diatas kita membagi menjadi 2 logic dasar yaitu logic untuk mengatasi Tabel dan satunya untuk Menangani Form.
Dengan konsep seperti diatas, kode kita juga jadi dapat di reusable dengan mudah.
sebagai contoh kalian menulisnya di file terpisah.
import useOurCrud from '@/api/todo.js'export default {
setup () {
const { create, read, update, destroy } = useOurCrud()
const data = reactive({
event: '',
date: ''
}) const addNewTodo = () => {
create(data).then().catch()
} return {
data,
addNewTodo
}
}
API Yang Disediakan
banyak sekali fungsi fungsi yang disediakan oleh API Composition, fungsi — fungsi yang harus kalian ketahui adalah fungsi yang menggantikan options api di Vue 2 sebelumnya.
Apa saja ? Seperti berikut :
ref(rawData)untuk penggantidatareactive(object)penggantidatacomputed(callback)untuk membuat variabel computedwatch(source, callback)membuat fungsi untuk watcheronMounted(callback)fungsi yang dijalankan ketika Mounted
dan masih banyak lainnya seperti onBeforeMount , onBeforeUpdate , watchEffect ,
Kalian bisa mempelajari nya dari situs dokumentasi resminya di :
https://composition-api.vuejs.org/
Intinya, fungsi dari Composition API hanya memberi pengganti dari Vue 2 sebelumnya dengan menggunakan konsep fungsi setup nya dan beberapa tambahan dan perubahan.
Misalnya untuk menangkap sebuah component saat lifecylce onMounted :
import { ref, onMounted } from '@vue/composition-api'setup () { onMounted(() => {
console.log('Component Mounted!')
})}
Atau misalnya kalian ingin melakukan watch pada suatu state :
import { ref, watch } from '@vue/composition-api'setup () {
const user = ref('Alfian')
watch(user, (newVal) => {
console.log('User has new val : ` + newVal')
}) return {
user
}
}
Bonus ! Exampe Code “Simple Todo List”
Terimakasih Telah Membaca !
Terimakasih telah membaca artikel saya, dengan niat berbagi semoga tulisan ini membawa berkah dan berguna. Jika ada kekurangan silahkan di koreksi karena saya juga dalam tahap belajar.
