Options API: data, methods, computed
Definisikan data reaktif, tulis methods yang dipanggil dari template, dan gunakan properti computed untuk nilai turunan yang diperbarui secara otomatis.
Options API: data, methods, computed adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu API Opsi
API Opsi mengatur logika komponen berdasarkan jenis opsi: data (status reaktif), metode (fungsi), terhitung (status turunan), pengamatan (efek samping), dan pengait siklus hidup. Masing-masing ditempatkan dalam properti objek bernama.
Opsi data
Mengembalikan objek berisi properti reaktif. Semua properti yang dideklarasikan dalam data() bersifat reaktif—Vue mengamatinya dan merender ulang templat saat nilainya berubah.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}Opsi metode
Fungsi yang dapat dipanggil dari templat atau metode lain. Di dalam metode, this merujuk pada instans komponen dan menyediakan akses ke properti data serta terhitung.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}Opsi computed
Properti terhitung menghasilkan nilai dari data reaktif. Nilainya disimpan dalam cache—perhitungannya hanya dilakukan ulang saat dependensinya berubah. Gunakan properti ini, bukan metode, untuk nilai turunan agar perhitungan yang tidak perlu dapat dihindari.
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}Properti Terhitung yang Dapat Ditulis
Computed dapat memiliki get dan set agar dapat ditulis—berguna untuk pengikatan dua arah dengan v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}Opsi watch
Pengamat menjalankan efek samping saat properti reaktif berubah. Gunakan pengamat untuk operasi asinkron yang dipicu oleh perubahan data, seperti mengambil data saat istilah pencarian berubah.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Pengait Siklus Hidup dalam API Opsi
Deklarasikan pengait siklus hidup sebagai metode: created, mounted, updated, unmounted. created dijalankan sebelum DOM siap. mounted dijalankan setelah komponen berada di DOM.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Akses Templat: $refs
Tambahkan atribut ref ke elemen templat, lalu akses elemen DOM atau komponen anak melalui this.$refs.name dalam metode. Akses ini tersedia setelah pemasangan.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixin vs API Komposisi
API Opsi memiliki mixin untuk berbagi logika antarkomponen. Dalam API Komposisi, mixin sebagian besar digantikan oleh composable—mixin lebih sulit dipahami dan memiliki masalah benturan ruang nama. Utamakan API Komposisi untuk kode baru.
API Opsi vs API Komposisi
API Opsi cocok untuk komponen kecil hingga menengah dan lebih mudah dipelajari oleh pemula. API Komposisi (setup() /