Options API: data methods computed
Tepkisel veriler tanımlayın, template'ten çağrılan metotlar yazın ve otomatik güncellenen türetilmiş değerler için computed özelliklerini kullanın.
Options API: data methods computed, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Options API Nedir?
Options API, bileşen mantığını seçenek türüne göre düzenler: data (reaktif durum), methods (işlevler), computed (türetilmiş durum), watch (yan etkiler) ve yaşam döngüsü kancaları. Her biri adlandırılmış bir nesne özelliği içinde yer alır.
data Seçeneği
Reaktif özelliklerden oluşan bir nesne döndürür. data() içinde tanımlanan tüm özellikler reaktiftir; Vue bunları izler ve değiştiklerinde şablonu yeniden oluşturur.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}methods Seçeneği
Şablondan veya diğer yöntemlerden çağrılabilen işlevlerdir. methods içinde this, bileşen örneğini ifade eder ve data ile computed özelliklerine erişim sağlar.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}computed Seçeneği
Hesaplanan özellikler, reaktif verilerden değer türetir. Önbelleğe alınırlar; yalnızca bağımlılıkları değiştiğinde yeniden hesaplanırlar. Gereksiz yeniden hesaplamaları önlemek için türetilmiş değerlerde methods yerine bunları kullanın.
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
}
}Yazılabilir Hesaplanan Özellikler
Bir computed özelliği, yazılabilir hâle getirmek için get ve set içerebilir; bu, v-model ile çift yönlü bağlamalarda kullanışlıdır.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}watch Seçeneği
İzleyiciler, reaktif bir özellik değiştiğinde yan etkileri çalıştırır. Veri değişiklikleriyle tetiklenen zaman uyumsuz işlemler için kullanın; örneğin bir arama terimi değiştiğinde veri getirmek için.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Options API'de Yaşam Döngüsü Kancaları
Yaşam döngüsü kancalarını yöntem olarak tanımlayın: created, mounted, updated, unmounted. created, DOM hazır olmadan önce çalışır. mounted, bileşen DOM'a eklendikten sonra çalışır.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Şablondan Erişim: $refs
Şablon öğesine bir ref özniteliği ekleyin ve yöntemlerde this.$refs.name aracılığıyla DOM öğesine veya alt bileşene erişin. Bu erişim, bileşen bağlandıktan sonra kullanılabilir.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Karışımlar ve Composition API
Options API, mantığı bileşenler arasında paylaşmak için karışımlar sunar. Composition API'de karışımların yerini büyük ölçüde birleştirilebilirler almıştır; karışımların mantığını anlamak daha zordur ve ad alanı çakışmalarına yol açabilir. Yeni kodlarda Composition API'yi tercih edin.
Options API ve Composition API
Options API, küçük ve orta ölçekli bileşenler için uygundur ve yeni başlayanlar açısından öğrenmesi daha kolaydır. Composition API (setup() /