API Options: data methods computed
Takrifkan data reaktif, tulis methods yang dipanggil daripada template, dan gunakan sifat computed untuk nilai terbitan yang dikemas kini secara automatik.
API Options: data methods computed ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah API Pilihan?
API Pilihan menyusun logik komponen mengikut jenis pilihan: data (state reaktif), methods (fungsi), computed (state terbitan), watch (kesan sampingan), dan cangkuk kitar hayat. Setiap satunya diletakkan dalam sifat objek bernama.
Pilihan data
Mengembalikan objek yang mengandungi sifat reaktif. Semua sifat yang diisytiharkan dalam data() adalah reaktif — Vue memerhatikannya dan memaparkan semula templat apabila sifat tersebut berubah.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}Pilihan methods
Fungsi yang boleh dipanggil daripada templat atau methods lain. Dalam methods, this merujuk kepada tika komponen dan menyediakan akses kepada sifat data dan computed.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}Pilihan computed
Sifat computed menghasilkan nilai daripada data reaktif. Nilai tersebut disimpan dalam cache — pengiraan hanya dilakukan semula apabila kebergantungannya berubah. Gunakan sifat ini dan bukannya methods untuk nilai terbitan bagi mengelakkan pengiraan semula yang tidak perlu.
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
}
}Sifat computed Boleh Tulis
Sifat computed boleh mempunyai get dan set untuk menjadikannya boleh ditulis — berguna untuk pengikatan dua hala dengan v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}Pilihan watch
Pemerhati menjalankan kesan sampingan apabila sifat reaktif berubah. Gunakannya untuk operasi tak segerak yang dicetuskan oleh perubahan data, seperti mendapatkan data apabila istilah carian berubah.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Cangkuk Kitar Hayat dalam API Pilihan
Isytiharkan cangkuk kitar hayat sebagai methods: created, mounted, updated, unmounted. created berjalan sebelum DOM sedia. mounted berjalan selepas komponen berada dalam 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 pada elemen templat dan akses elemen DOM atau komponen anak melalui this.$refs.name dalam methods. Tersedia selepas pemasangan.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixin berbanding API Komposisi
API Pilihan mempunyai mixin untuk berkongsi logik antara komponen. Mixin sebahagian besarnya digantikan oleh fungsi komposabel dalam API Komposisi — mixin lebih sukar difahami dan mempunyai masalah pertembungan ruang nama. Utamakan API Komposisi untuk kod baharu.
API Pilihan berbanding API Komposisi
API Pilihan sangat sesuai untuk komponen kecil hingga sederhana dan lebih mudah dipelajari oleh pemula. API Komposisi (setup() /