Vue JS adalah salah satu framework Javascript yang berguna untuk membuat front end. Vue JS atau selanjutnya disebut Vue, adalah framework yang berguna untuk membuat user interface dan single-page application (SPA). Framework ini bersifat open source sehingga dapat kamu gunakan secara bebas. Pada arsitektur MVC (Model-View-Controller), Vue JS akan mengambil peran pada View nya saja. Pada 18 September lalu, Vue JS secara resmi merilis Vue 3. Buat kamu pengguna setia Vue, atau bahkan baru saja menyelamu Vue, artikel ini akan mengajak kamu menilik fitur anyar pada Vue 3, apa saja ya?
Composition API Menggunakan Hooks
Salah satu fitur andalan Vue JS adalah composition API. Pada Vue 3, kamu tidak perlu lagi menginstall Composition API dan dapat langsung kamu gunakan di luar box tanpa pengaturan tambahan. Terinspirasi dari React Hooks, fitur baru ini memungkinkan penulisan komponen dalam mode function based. Kamu dapat mengenkapsulasi logika program dalam composition functions dan menggunakannya kembali pada objek-objek yang kamu miliki.
Namun, jika kamu masih menggunakan Vue versi 2 kamu tidak perlu khawatir. Vue 3 masih 100% mendukung option-based API.
Secara garis besar, terdapat dua keuntungan function-based API yakni :
1. Pengorganisasian kode yang lebih baik
2. Resharing / reusable code lebih maksimal
Dukungan <Template> Untuk Multiple Root Elements
Perubahan lainnya adalah adanya multiple roots element. Pada Vue 2, <template> hanya mendukung one root element. Misal kamu memiliki dua tag <p>, kamu harus membungkus tag ini dalam sebuah <div> agar dapat bekerja sebagai mana mestinya. Kamu juga harus mendefinisikan CSS agar tampilan sesuai dengan harapan kamu.
Sementara itu, pada Vue 3 kamu dapat langsung sejumlah tags langsung dalam tag <template>. Sebagai contoh, kamu dapat memasukkan tag <p> langsung dalama <template>
<template>
<p> Count: {{ count }} </p>
<button @click="increment"> Increment </button>
<button @click="decrement"> Decrement</button>
</template>
Suspense
Suspense adalah fitur baru pada Vue 3 yang akan me-render komponen default maupun fallback sampai komponen utama berhasil melakukan fetch data. Cara kerja suspense mirip dengan async operations saat fetch data dari server. Kamu tidak perlu lagi mendefinisikan v-if kemudian mengembalikannya. Fitur ini akan langsung melakukannya untuk kamu.
Fitur Baru Lainnya
Vue 3 juga memiliki beberapa fitur baru lainnya, yakni
1. Multiple v-models
2. Reaktivitas yang lebih baik
3. Global mounting
4. Native portal (sekarang disebut Teleport)
5. Update pada Virtual DOM dan TypeScript
Dan masih banyak lagi.
Nah, itulah beberapa Fitur Anyar Pada Vue 3. Sudah siap beralih?
