updated

Misol

DOM daraxti har safar yangilanganda konsolga xabar yozish uchun updated lifecycle hook’idan foydalanish.

export default {
  data() {
    return {
      sliderVal: 50,
      renderCount: 0
    }
  },
  updated() {
    this.renderCount++;
    console.log('Updated ' + this.renderCount + ' times.')
  }
}

Misolni ishga tushirish »

Ta’rif va qo‘llanilishi

updated lifecycle hook’i DOM daraxti yangilangandan so‘ng darhol ishga tushadi.

Agar updated hook’ida xususiyatni o‘zgartirsak yoki yangi render qilishni ishga tushiradigan boshqa biror ish qilsak, updated hook’i o‘sha yangi renderdan keyin yana chaqiriladi va katta ehtimol bilan cheksiz sikl hosil qilgan bo‘lamiz.

Cheksiz siklning oldini olish uchun har doim updated lifecycle hook’i o‘rniga beforeUpdate lifecycle hook’idan foydalanishni ko‘rib chiqishimiz kerak.

this.$nextTick() yoki nextTick() funksiyalaridan DOM yangilangandan keyin kodni ishga tushirish uchun ham foydalanish mumkin.

Eslatma: Yuqoridagi misolda renderlar sonini konsolga yozamiz, chunki ko‘rinishga (view) o‘zgartirish kiritish updated hook’ini qayta ishga tushiradi va cheksiz sikl hosil qiladi.

Tegishli sahifalar

Vue qo‘llanmasi: Vue lifecycle hook’lari

Vue qo‘llanmasi: ‘beforeUpdate’ hook’i

Vue ma’lumotnomasi: Vue "beforeUpdate" lifecycle hook’i

Vue ma’lumotnomasi: Vue $nextTick() metodi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish