Yaşam Döngüsü ve Şablon Referansları

Şu ana kadar, Vue reaktivite ve deklaratif render sayesinde tüm DOM güncellemelerini bizim için yönetiyordu. Ancak, kaçınılmaz olarak, DOM ile manuel olarak çalışmamız gereken durumlar olacaktır.

Şablon referansı - yani şablondaki bir elemana referans - özel ref özelliği kullanılarak istenebilir:

<p ref="pElementRef">hello</p>

Ref'e erişmek için, eşleşen adla bir ref beyan edip ve onu açığa çıkarmamız gerekir:

const pElementRef = ref(null)

setup() {
  const pElementRef = ref(null)

  return {
    pElementRef
  }
}

Ref'in null değeriyle başlatıldığını unutmayın. Bu, ```setup() çalıştırıldığında elementin henüz var olmamasından kaynaklanmaktadır. Şablon referansı, bileşen mount edildikten sonra yalnızca erişilebilir.

ipucu

Mount işleminden sonra kod çalıştırmak için onMounted() fonksiyonunu kullanabilirsiniz.

import { onMounted } from 'vue'

onMounted(() => {
  // bileşen artık mount edildi.
})

import { onMounted } from 'vue'

createApp({
  setup() {
    onMounted(() => {
      // bileşen artık mount edildi.
    })
  }
})

Element, this.$refs üzerinde this.$refs.pElementRef olarak açığa çıkartılacaktır. Ancak, yalnızca bileşen mount edildikten sonra erişebilirsiniz.

ipucu

Mount işleminden sonra kod çalıştırmak için mounted seçeneğini kullanabilirsiniz.

export default {
  mounted() {
    // bileşen artık mount edildi.
  }
}

createApp({
  mounted() {
    // bileşen artık mount edildi.
  }
})

Bu, bir yaşam döngüsü kancası olarak adlandırılır - bileşenin yaşam döngüsünün belirli zamanlarında çağrılacak bir geri çağırma tanımlamamızı sağlar. Diğer kancalar created ve updated``onUpdated ve onUnmounted gibi vardır. Daha fazla detay için Yaşam Döngüsü Diyagramı'na göz atın.

Şimdi, bir mounted``onMounted kancası eklemeye, elementine `this.$refs.pElementRefpElementRef.valuearacılığıyla erişmeye ve üzerinde bazı doğrudan DOM işlemleri yapmaya çalışın (örneğin,textContent`'ını değiştirmek).

Yaşam Döngüsü ve Şablon Referansları​

Yaşam Döngüsü ve Şablon Referansları