Vue Academy · Ders

Yaşam Döngüsü Aşamalarına Genel Bakış

Oluşturma, bağlama, güncelleme, ayırma — her aşamada ne olduğu.

Yaşam Döngüsü Aşamalarına Genel Bakış, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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 4 dersten oluşur.

Bir Bileşenin Yaşam Döngüsü Vardır

Her Vue bileşeni öngörülebilir bir süreçten geçer: oluşturulur, sayfaya bağlanır, veriler değiştikçe güncellenir ve sonunda kaldırılır. Bunlar yaşam döngüsü aşamalarıdır ve Vue her birine bağlanmanıza olanak tanır.

Dört Aşama

Oluşturma — kurulum çalışır, reaktiflik başlatılır.
Bağlama — DOM oluşturulur ve eklenir.
Güncelleme — reaktif değişiklikler yeniden oluşturmaları tetikler.
Kaldırma — bileşen kaldırılır ve temizlenir.

1. Aşama: Oluşturma

İlk olarak bileşen örneği oluşturulur ve reaktiflik bağlanır. Composition API'de <script setup> (veya setup()) burada çalışır. DOM henüz mevcut değildir; bu nedenle bu aşamada öğeleri okuyamazsınız.

Oluşturma Sırasında Yapabilecekleriniz

Oluşturma aşaması, reaktif durumu tanımlamak ve veri çekmeyi başlatmak gibi DOM dışı işlemleri başlatmak için uygundur. Ancak şablonun henüz oluşturulmadığını, dolayısıyla DOM başvurularının hâlâ boş olduğunu unutmayın.

<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>

2. Aşama: Bağlama

Ardından Vue, şablonunuzdan gerçek DOM düğümlerini oluşturur ve bunları sayfaya ekler. Bağlamadan sonra şablon başvuruları gerçek öğeleri gösterir; DOM'u ölçebilir veya değiştirebilirsiniz.

Bağlama Kancası

onMounted, bileşen eklendikten hemen sonra bir kez çalışır. Grafik başlatmak veya bir girdiye odaklanmak gibi DOM'a bağlı hazırlıklar için doğru yer burasıdır.

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('in the DOM now')
})
</script>

3. Aşama: Güncelleme

Bileşenin bağlı olduğu reaktif veriler değiştiğinde Vue, DOM'u verimli biçimde yeniden oluşturur ve yamalar — yalnızca değişen bölümleri günceller. Bu güncelleme döngüsü, bileşenin yaşamı boyunca birçok kez gerçekleşebilir.

Güncelleme Kancaları

onBeforeUpdate, DOM'a yama uygulanmadan hemen önce; onUpdated ise hemen sonra çalışır. Oluşturmayı etkileyen her reaktif değişiklikte tetiklenirler.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM patched')
})
</script>

4. Aşama: Kaldırma

Bir bileşen v-if, rota değişikliği veya listeden kaldırma yoluyla kaldırıldığında Vue onu parçalar. Bellek sızıntılarını önlemek için zamanlayıcıları, dinleyicileri ve abonelikleri temizleme fırsatınız budur.

Kaldırma Kancası

onUnmounted, bileşen kaldırıldıktan sonra çalışır. Aralık zamanlayıcılarını iptal edin, genel dinleyicileri kaldırın ve devam eden istekleri burada durdurun.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Tam Sıralama

Kancalar, bileşenin yaşamı boyunca şu sırayla çalışır: kurulum, onBeforeMount, onMounted; ardından tekrarlanan onBeforeUpdate/onUpdated çiftleri ve son olarak onBeforeUnmount/onUnmounted.

Hızlı Kontrol

Yaşam döngüsünü ne kadar iyi kavradığınızı sınayın.

Özet

Artık genel tabloyu görüyorsunuz:

Oluşturma: kurulum çalışır, reaktivite hazırdır, DOM yoktur.
Monte etme: DOM oluşturulur ve eklenir; ref'ler kullanılabilir hâle gelir.
Güncelleme: reaktif değişiklik verimli bir yamayı tetikler.
Kaldırma: bileşen kaldırılır; temizleme işlemini burada yapın.

Sıkça Sorulan Sorular

“Yaşam Döngüsü Aşamalarına Genel Bakış” dersi ücretsiz mi?

Evet — “Yaşam Döngüsü Aşamalarına Genel Bakış” 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 4 dersten oluşur.

“Yaşam Döngüsü Aşamalarına Genel Bakış” dersinde ne öğreneceğim?

Oluşturma, bağlama, güncelleme, ayırma — her aşamada ne olduğu. 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, 4 dersinin 1. dersidir.

“Yaşam Döngüsü Aşamalarına Genel Bakış” 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

← Vue Academy Sayfasına Dön