Yaşam Döngüsü Kancaları ve Veri Çekme
Verileri bileşen yaşam döngüsünün doğru aşamasında çekin.
Yaşam Döngüsü Kancaları ve Veri Çekme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.
Veriler Ne Zaman Alınmalı?
Bileşenlerin bir yaşam döngüsü vardır: oluşturulur, DOM'a bağlanır, güncellenir ve sonunda DOM'dan kaldırılırlar. Veri almak için hangi yaşam döngüsü kancasını kullanacağınızı bilmek, uygulamanızın duyarlı ve doğru çalışmasını sağlar.
created Kancası
created kancası, reaktif veriler oluşturulduktan ancak bileşen DOM'a eklenmeden önce çalışır. Tepkisellik zaten çalıştığı için veri almaya başlamak için uygun bir yerdir.
export default {
data() {
return { posts: [] }
},
created() {
this.fetchPosts()
}
}mounted Kancası
mounted kancası, bileşen DOM'a eklendikten sonra çalışır. Veri alma mantığınızın DOM öğelerine veya oluşturulmuş bir öğe gerektiren üçüncü taraf kitaplıklara erişmesi gerektiğinde bunu kullanın.
export default {
mounted() {
this.fetchPosts()
// template refs are now available here
}
}created ve mounted
Salt veri alma işlemi için her ikisi de kullanılabilir. created biraz daha erken çalıştığı için istek daha erken başlar. Oluşturulmuş DOM'a gerçekten ihtiyaç duyduğunuzda mounted seçeneğini kullanın. Çoğu API çağrısı için ikisi de uygundur.
Composition API'de onMounted
Composition API'de yaşam döngüsü kancaları, setup içinde çağrılan içe aktarılmış işlevlerdir. mounted kancasının karşılığı onMounted'dır.
import { ref, onMounted } from "vue"
import { api } from "./api"
export default {
setup() {
const posts = ref([])
onMounted(async () => {
const res = await api.get("/posts")
posts.value = res.data
})
return { posts }
}
}Yüklenme Durumu Deseni
Ağ istekleri zaman alır. Veriler gelirken bir yüklenme göstergesi göstermek ve işlem tamamlandığında bunu gizlemek için bir loading bayrağını izleyin.
data() {
return {
posts: [],
loading: false
}
}Yüklenmeyi Değiştirme
İstekten önce loading değerini true olarak ayarlayın ve sonuç ne olursa olsun sonrasında false değerine döndürün.
async fetchPosts() {
this.loading = true
try {
const res = await api.get("/posts")
this.posts = res.data
} finally {
this.loading = false
}
}Yüklenme Göstergesi Gösterme
Şablonda, veriler gelirken bir yüklenme göstergesi veya mesaj görüntülemek için yüklenme bayrağına göre koşullu davranın.
<template>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Boş Sonuçları Yönetme
Her zaman boş bir yanıtı hesaba katın. Alınan listede hiç öğe olmadığında anlaşılır ve kullanıcı dostu bir mesaj gösterin.
<ul v-if="posts.length">
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>Composition API Yüklenme Deseni
Aynı yüklenme deseni, ref'lerle Composition API'ye kolayca uyarlanabilir.
const posts = ref([])
const loading = ref(false)
async function load() {
loading.value = true
try {
posts.value = (await api.get("/posts")).data
} finally {
loading.value = false
}
}
onMounted(load)Alınan Verileri Görüntüleme
Veriler reaktif duruma alındığında şablon bunları otomatik olarak oluşturur. Özenli bir kullanıcı deneyimi için yüklenme, veri ve boş durumlarını birlikte ele alın.
<template>
<section>
<p v-if="loading">Loading...</p>
<ul v-else-if="posts.length">
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
<p v-else>Nothing here yet.</p>
</section>
</template>Kısa Kontrol
Yaşam döngüsü kancaları ve veri alma hakkındaki bilginizi sınayın.
Özet
Verileri created veya mounted kancasında (Composition API'de ise onMounted ile) alın. Kullanıcı arayüzünün bir yüklenme göstergesi göstermesi, verileri oluşturması ve boş sonuçları yönetmesi için try/finally ile bir loading bayrağını izleyin. Sırada hataları yöneterek ve araya giriciler kullanarak bu istekleri daha sağlam hâle getireceksiniz.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“Yaşam Döngüsü Kancaları ve Veri Çekme” dersi ücretsiz mi?
Evet — “Yaşam Döngüsü Kancaları ve Veri Çekme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.
“Yaşam Döngüsü Kancaları ve Veri Çekme” dersinde ne öğreneceğim?
Verileri bileşen yaşam döngüsünün doğru aşamasında çekin. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.
“Yaşam Döngüsü Kancaları ve Veri Çekme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Axios ile HTTP İstekleri
- Yaşam Döngüsü Kancaları ve Veri Çekme
- Hata Yönetimi ve Genel Araya Giriciler