Bermigrasi ke Vue 3 Composition API untuk Pengembangan Komponen yang Lebih Baik
Table of content:
Karena pembuat Vue telah mengumumkan bahwa Vue 2 akan mencapai akhir masa pakainya pada tanggal 31 Desember 2023, pengembang didorong untuk beralih ke Vue 3.
Dengan transisi ini hadirlah Composition API, sebuah fitur yang menawarkan pendekatan yang lebih modular, deklaratif, dan aman untuk membangun aplikasi Vue.
Baca Juga:
Apa itu API Komposisi?
Composition API merepresentasikan perubahan paradigma dalam penulisan komponen Vue dari objek Options. Gaya pengembangan ini mengadopsi pendekatan yang lebih deklaratif, memungkinkan Anda untuk fokus membangun aplikasi Vue sambil mengabstraksikan detail implementasi.
Motivasi untuk API Komposisi
Pembuat Vue menyadari tantangan ketika membangun aplikasi web yang kompleks dengan objek Options. Seiring berkembangnya proyek, pengelolaan logika komponen menjadi kurang terukur dan sulit dipertahankan, terutama dalam lingkungan kolaboratif.
Pendekatan objek Opsi tradisional sering kali menghasilkan banyak properti komponen, sehingga membuat kode sulit untuk dipahami dan dipelihara.
Selain itu, menggunakan kembali logika komponen di berbagai komponen menjadi rumit. Logika yang tersebar dalam berbagai kaitan dan metode siklus hidup juga menambah kompleksitas dalam memahami perilaku komponen secara keseluruhan.
Manfaat API Komposisi
Composition API memberikan beberapa keunggulan dibandingkan Options API.
1. Peningkatan Kinerja
Vue 3 memperkenalkan mekanisme rendering baru yang disebut Sistem Reaktivitas Berbasis Proxy. Sistem ini memberikan kinerja yang lebih baik dengan mengurangi konsumsi memori dan meningkatkan reaktivitas. Sistem reaktivitas baru memungkinkan Vue 3 menangani lebih banyak pohon komponen raksasa dengan lebih efisien.
2. Ukuran Bundel Lebih Kecil
Berkat basis kode yang dioptimalkan dan dukungan tree-shaking, Vue 3 memiliki ukuran bundel yang lebih kecil dibandingkan Vue 2. Pengurangan ukuran bundel ini menghasilkan waktu pemuatan yang lebih cepat dan peningkatan kinerja.
3. Peningkatan Organisasi Kode
Dengan memanfaatkan Composition API, Anda dapat mengatur kode komponen menjadi fungsi yang lebih kecil dan dapat digunakan kembali. Hal ini mendorong pemahaman dan pemeliharaan yang lebih baik, terutama untuk komponen yang besar dan kompleks.
4. Penggunaan Kembali Komponen dan Fungsi
Fungsi komposisi dapat dengan mudah digunakan kembali di berbagai komponen, memfasilitasi berbagi kode dan pembuatan pustaka fungsi yang dapat digunakan kembali.
5. Dukungan TypeScript yang Lebih Baik
Composition API menyediakan dukungan TypeScript yang lebih komprehensif, memungkinkan inferensi tipe yang lebih akurat dan identifikasi kesalahan terkait tipe yang lebih mudah selama pengembangan.
Perbandingan Antara Objek Opsi dan API Komposisi
Sekarang setelah Anda memahami teori di balik Composition API, Anda dapat mulai menggunakannya dalam praktik. Untuk memahami keunggulan Composition API, mari kita bandingkan beberapa aspek utama dari kedua pendekatan tersebut.
Data Reaktif di Vue 3
Data reaktif adalah konsep dasar di Vue yang memungkinkan perubahan data di aplikasi Anda memicu pembaruan di antarmuka pengguna secara otomatis.
Vue 2 mendasarkan sistem reaktifnya pada Objek.defineProperty metode dan mengandalkan objek data yang berisi semua properti reaktif.
Saat Anda mendefinisikan properti data dengan opsi data di komponen Vue, Vue secara otomatis membungkus setiap properti di objek data dengan getter dan setter, sebuah fitur ECMA Script (ES6) yang baru.
Pengambil dan penyetel ini melacak ketergantungan antar properti dan memperbarui UI saat Anda memodifikasi properti apa pun.
Berikut contoh cara membuat data reaktif di Vue 2 dengan objek Options:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template><script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>
Blok kode mendemonstrasikan cara membuat variabel di Vue 2. Vue membuat variabel yang ditentukan dalam objek data menjadi reaktif secara otomatis. Perubahan yang Anda buat pada properti data (menghitung) akan menyebabkan pembaruan pada UI aplikasi Anda.
Selain itu, Anda menggunakan metode objek untuk mendefinisikan fungsi JavaScript yang digunakan dalam komponen. Dalam contoh ini, cuplikan mendefinisikan kenaikan() metode, yang menambah menghitung nilai variabel sebesar 1.
Saat menulis fungsi sebagai metode di Vue 2, Anda juga perlu menggunakan ini kata kunci (ini.hitung++). Itu ini kata kunci memungkinkan Anda menunjuk ke variabel dalam objek data. Menghilangkan ini kata kunci akan menimbulkan kesalahan ketika Vue memasang komponen.
Sistem Reaktivitas Berbasis Proksi Vue 3 menggunakan proksi JavaScript untuk mencapai reaktivitas, yang menawarkan peningkatan kinerja signifikan dan penanganan ketergantungan reaktif yang lebih baik.
Anda menggunakan referensi atau reaktif berfungsi untuk mendefinisikan data reaktif di Vue 3. The referensi fungsi membuat referensi reaktif tunggal ke suatu nilai, sedangkan reaktif fungsi membuat objek reaktif yang berisi banyak properti.
Berikut contoh cara membuat data reaktif dengan referensi fungsi di Vue 3:
<script setup>
import { ref } from 'vue';const count = ref(0);
function increment() {
count.value++;
}
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
Untuk menggunakan referensi() berfungsi di Vue 3, Anda harus mengimpornya terlebih dahulu dari vue kemasan. Itu referensi() fungsi membuat referensi reaktif ke variabel.
Contoh blok kode menciptakan menghitung variabel dengan referensi() fungsi dan menetapkan nilai awalnya ke 0. The referensi() fungsi mengembalikan objek dengan a nilai Properti. Ini nilai properti memegang nilai sebenarnya dari menghitung.
Itu @klik direktif digunakan untuk menangani event klik di Vue.
Anda mendefinisikan fungsi-fungsi yang diperlukan dalam komponen Anda di dalam pengaturan skrip memblokir. Vue 3 menggantikan sintaks metode untuk mendefinisikan fungsi di Vue 2 dengan fungsi JavaScript biasa.
Anda sekarang dapat mengakses variabel reaktif yang Anda tentukan dengan referensi() berfungsi dengan melampirkan metode nilai ke nama variabel. Misalnya, blok kode menggunakan hitungan.nilai untuk merujuk pada nilai menghitung variabel.
Fungsi yang Dihitung di Vue 3
Fungsi Computed adalah fitur Vue lain yang memungkinkan Anda menentukan nilai turunan berdasarkan data reaktif. Properti yang dihitung secara otomatis diperbarui setiap kali dependensinya berubah, memastikan bahwa nilai yang diperoleh selalu terbaru.
Di Vue 2, Anda mendefinisikan perilaku yang dihitung dengan dihitung pilihan dalam suatu komponen. Berikut ini contohnya:
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template><script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
incrementCount() {
this.count++;
}
}
};
</script>
Dalam contoh di atas, hitungan ganda properti yang dihitung bergantung pada menghitung properti data. Kapan pun menghitung perubahan properti, Vue menghitung ulang hitungan ganda Properti.
Di Vue 3, Composition API memperkenalkan cara baru untuk mendefinisikan properti terkomputasi menggunakan dihitung fungsi. Begini tampilannya:
<script setup>
import { ref, computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const incrementCount = () => {
count.value++;
};
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>
Anda harus mengimpor dihitung fungsi dari vue paket sebelum Anda dapat menggunakan fungsinya.
Anda mendefinisikan a hitungan ganda referensi yang dihitung dalam blok kode di atas dengan dihitung fungsi. Vue 3 mengacu pada properti yang dihitung sebagai referensi yang dihitung, menyoroti ketergantungannya pada variabel reaktif.
Itu dihitung fungsi mengambil fungsi pengambil sebagai argumen, yang menghitung nilai turunan berdasarkan data reaktif. Dalam hal ini, hitungan ganda ref yang dihitung mengembalikan perkalian variabel reaktif hitungan dengan 2.
Perhatikan bahwa blok kode berdasarkan Composition API lebih mudah dibaca dan ringkas dibandingkan yang ditulis dengan objek Options.
Belajar Membuat Direktif Kustom di Vue
Vue 3 Composition API menghadirkan pendekatan yang kuat dan fleksibel untuk mengatur dan menggunakan kembali kode dalam komponen Vue. Anda dapat membangun aplikasi Vue yang lebih modular dan mudah dipelihara dengan Composition API.
Vue juga menawarkan fitur tambahan untuk memaksimalkan produktivitas saat mengembangkan aplikasi web. Anda dapat belajar membuat arahan khusus untuk menggunakan kembali fungsi-fungsi tertentu di berbagai bagian aplikasi Vue Anda.
Artikel Terkait
