Vue Academy · Ders

onMounted ve onBeforeMount

onMounted içinde DOM'a erişme, onBeforeMount'un neden nadiren doğrudan kullanılması gerektiği.

onMounted ve onBeforeMount, CoddyKit'te ücretsiz bir Vue 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, 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.

Monte Etme Sırasındaki Kancalar

Monte etme aşamasında iki kanca vardır: onBeforeMount, DOM oluşturulmadan hemen önce çalışır; onMounted ise DOM eklendikten hemen sonra çalışır. Benzer görünseler de çok farklı ihtiyaçlara hizmet ederler.

onMounted: DOM Hazır

onMounted çalıştığında bileşenin şablonu işlenmiş ve sayfada yerini almıştır. Şablon ref'leri gerçek öğeleri gösterdiğinden DOM işlemleri burada yapılmalıdır.

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

Kullanım Alanı: Grafik Başlatma

Bir DOM öğesine çizim yapan kitaplıkların önce o öğenin var olması gerekir. Bunları onMounted içinde, ref öğesini geçirerek başlatın.

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

Kullanım Alanı: DOM Ölçümleri

Boyutları, konumları veya kaydırma uzaklıklarını okumak için gerçek DOM gerekir. onMounted, bir öğeyi ölçmek için en erken güvenli noktadır.

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

Kullanım Alanı: initial Veri Alma

Bileşen göründüğünde veri almak, klasik bir onMounted görevidir. Sonucu bir ref içinde saklayın; böylece veri geldiğinde şablon güncellenir.

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

onMounted Bir Kez Çalışır

onMounted, her bileşen örneği için yalnızca bir kez çalışır. Bileşen kaldırılıp daha sonra yeniden oluşturulursa yeni örnek kendi onMounted kancasını çalıştırır.

onBeforeMount: Eklenmeden Hemen Önce

onBeforeMount, kurulumdan sonra ancak DOM oluşturulmadan önce çalışır. Reaktif durum mevcuttur, ancak henüz hiçbir şey işlenmediği için şablon ref'leri hâlâ null değerindedir.

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

onBeforeMount Neden Nadiren Gereklidir

Kurulum işlemlerinin çoğu doğrudan <script setup> içinde yapılabilir; bu bölüm zaten monte etme işleminden önce çalışır. DOM ile ilgili her şey ise onMounted kancasını beklemelidir. Bu nedenle onBeforeMount için çok az pratik kullanım alanı kalır.

Yaygın Bir Hata

Kurulum sırasında veya onBeforeMount içinde bir şablon ref'ine erişmeye çalışmak null verir. Öğe, monte etme işlemi tamamlanana kadar var olmaz. DOM erişimini her zaman onMounted içine taşıyın.

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

Birden Çok Kanca Kaydetme

onMounted işlevini birden fazla kez çağırabilirsiniz; tüm geri çağırımlar sırayla çalışır. Bu nedenle bileşim işlevlerinin her biri kendi onMounted kancasını bağımsız olarak kaydedebilir.

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

Aralarında Seçim Yapma

onMounted: DOM kullanılabilir — grafikler, ölçümler, odaklama ve veri alma için kullanılır.
onBeforeMount: ön işleme kancasıdır, DOM yoktur ve nadiren gerekir.

Hızlı Kontrol

Monte etme kancaları hakkındaki bilginizi sınayın.

Özet

Monte etme kancalarının özeti:

onMounted, DOM eklendikten sonra çalışır; grafik başlatma, ölçüm, odaklama ve initial veri alma işlemleri için kullanın.
Her örnek için bir kez çalışır ve birden çok kez kaydedilebilir.
onBeforeMount, işleme işleminden önce DOM erişimi olmadan çalışır ve nadiren gerekir.

Sıkça Sorulan Sorular

“onMounted ve onBeforeMount” dersi ücretsiz mi?

Evet — “onMounted ve onBeforeMount” 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.

“onMounted ve onBeforeMount” dersinde ne öğreneceğim?

onMounted içinde DOM'a erişme, onBeforeMount'un neden nadiren doğrudan kullanılması gerektiği. 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 2. dersidir.

“onMounted ve onBeforeMount” 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