1. Composition API
Composition API adalah fitur baru dalam Vue.js 3 yang memungkinkan pengembang untuk menulis logika komponen dalam bentuk fungsi terpisah, yang dapat digunakan kembali dan dikomposisikan bersama-sama untuk membentuk logika yang lebih kompleks. Dengan menggunakan Composition API, pengembang dapat memecah logika komponen menjadi fungsi-fungsi yang lebih kecil dan lebih mudah dikelola, memisahkan konsern, dan meningkatkan reusabilitas kode. Composition API juga memungkinkan pengembang untuk menulis fungsi yang menerima dan mengembalikan nilai reactive, sehingga memungkinkan pengembangan aplikasi yang lebih responsif dan mudah di-debug. Selain itu, Composition API juga menyediakan berbagai utilitas untuk manajemen state, lifecycle hooks, dan event handling yang lebih mudah dan intuitif. Salah satu kelebihan Composition API adalah kemampuannya untuk mengatasi masalah kompleksitas dan skala dalam pengembangan aplikasi web yang besar. Dengan menggunakan Composition API, pengembang dapat memecah logika yang kompleks menjadi beberapa fungsi kecil dan mengelompokkannya bersama-sama dengan cara yang logis dan mudah di-maintain. Kumpulan API memungkinkan kita untuk membuat komponen Vue menggunakan fungsi yang diimpor. Pada Options API, kita membuat komponen Vue dengan mendeklarasikan options dalam bentuk JavaScript object.<template>
<button @click="increment">Count is: {{ count }} </button>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
mounted() {
console.log(`The initial count is ${this.count}.`)
},
methods: {
increment() {
this.count++
}
}
}
</script>
Contoh Options API pada Single-File-Component
<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
Contoh Composition API pada Single-File-Component <script setup>
2. Teleport
<Teleport> adalah komponen bawaan pada Vue.Js 3 yang dapat mengirim bagian dari template komponen ke DOM yang berada di luar hirarki DOM komponen tersebut. Salah satu contoh penggunaan <Teleport> yaitu dalam pembuatan komponen modal full-screen. Dengan menggunakan komponen ini, maka kita dapat mengirim komponen modal di luar komponen yang memanggilnya. Contoh pemakaian <Teleport> bisa dilihat di bawah ini:<script setup>
import { ref } from 'vue'
const isShow = ref(false)
function openModal() {
isShow.value = true
}
function closeModal() {
isShow.value = false
}
</script>
<template>
<button @click="openModal">Open Modal</button>
<Teleport to="body">
<div
v-if="isShow"
class="modal"
>
<div class="modal__wrapper">
<div class="modal__content">
<p>Hello from the modal!</p>
<button @click="closeModal">Close</button>
</div>
</div>
</div>
</Teleport>
</template>
<style lang="scss" scoped>
modal {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
&__wrapper {
display: table-cell;
vertical-align: middle;
}
&__content {
background-color: lightgray;
color: black;
max-width: 300px;
margin-left: auto;
margin-right: auto;
padding: 24px;
}
}
</style>
3. Fragments
Pada saat membuat komponen di Vue.Js 2, kita tidak dapat membuat multi-root nodes. Untuk memperbaiki error tersebut, kita biasa membungkus komponen-komponen tersebut dalam satu DOM seperti contoh berikut:<!-- Layout.vue -->
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
Pada Vue.Js 3, akhirnya kita dapat membuat komponen dengan multiple root nodes sehingga dapat mengurangi jumlah DOM yang tidak diperlukan pada browser. Namun saat menggunakan Fragments, kita perlu menaruh di mana attributes harus didistribusikan secara eksplisit menggunakan v-bind=”$attrs”.
<!-- Page.vue -->
<template>
<layout class="active" />
</template>
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
4. Suspense
<Suspense> adalah komponen bawaan untuk mengatur async dependencies dalam component tree. Dengan komponen ini, kita dapat menampilkan loading state selagi menunggu async dependencies untuk selesai dimuat. Terdapat dua jenis async dependencies yang membuat <Suspense> dapat digunakan:- Komponen yang menggunakan async setup() atau komponen yang menggunakan <script setup> dengan top-level await.
- Komponen yang diimport menggunakan defineAsyncComponent.
// Pokemon.vue
<script setup>
const url = 'https://pokeapi.co/api/v2/pokemon?limit=10&offset=0'
const res = await fetch(url)
const pokemon = await res.json()
</script>
<template>
<pre>{{ pokemon }}</pre>
</template>
// Page.vue
<script setup>
import Pokemon from './Pokemon.vue';
</script>
<template>
<Suspense>
<!-- component with nested async dependencies -->
<Pokemon />
<!-- loading state via #fallback slot -->
<template #fallback>Loading...</template>
</Suspense>
</template>
<Suspense> akan mencari apakah terdapat async dependencies dan memasuki pending state. Di dalam pending state, <Suspense> akan menampilkan fallback content sampai semua async dependencies telah selesai dimuat. Setelah itu <Suspense> akan memasuki resolved state dan menampilkan konten yang ada di dalam default slot.
Kesimpulan
Composition API merubah cara kita membuat Single-File-Component pada Vue dengan mengurangi boilerplate yang ada pada Options API.
Komponen <Teleport> memungkinkan kita mengirim komponen ke hirarki di luar komponen yang memanggilnya.
Fragments memungkinkan kita membuat komponen dengan multi-root sehingga dapat mengurangi jumlah DOM yang tidak diperlukan pada browser.
Dengan komponen <Suspense>, kita dapat membuat loading state sebagai placeholder sampai semua async dependencies selesai dimuat.
Penulis : Aditya – EAS PT Xsis Mitra Utama
Referensi https://medium.com/@albertxto/empat-fitur-baru-yang-terdapat-pada-vue-3-82d1761f3fd2 https://www.debug.my.id/2022/12/seri-vuejs-3-untuk-pemula-belajar-vue-3.html https://nusagates.co.id/artikel/mengenal-perbedaan-ref-dan-reactive-pada-vue-3/