Ma'lumotga ketma-ket bir nechta qiymatlarni tayinlashda qayta render bo'ladimi?

Ha, bo'ladi. Garchi har bir tayinlashda emas.

Vue reaktiv tizimdan foydalanadi. Siz data ichidagi reaktiv xususiyatga yangi qiymat tayinlaganingizda, Vue bu o'zgarishni kuzatadi.

Bir kod blokidagi ketma-ket o'zgarishlar (masalan, voqea ishlovchisi yoki hayot aylanishi hook ichida) odatda bir rejalashtirilgan yangilanishga (qayta chizishga) olib keladi. Vue bu o'zgarishlarni buferlaydi va ularni asinxron tarzda keyingi "tick"da qo'llaydi, takroriy qayta chizishni oldini olish uchun.

Misol:

// Vue komponenti
export default {
  data() {
    return {
      count: 0,
      message: 'Salom'
    };
  },
  methods: {
    updateData() {
      // Ketma-ket ikkita tayinlash
      this.count = this.count + 1;
      this.message = 'Yangilandi: ' + this.count;
      // Vue bu yerda *bir* DOM yangilanishini rejalashtiradi
    }
  }
}

Ushbu misolda, ikkala o'zgarish (this.count va this.message) reaktiv ma'lumotlarda bo'lsa-da, Vue updateData bajarilishini tugatgach (yoki, aniqroq aytganda, keyingi "tick"da) faqat bitta qayta chizishni amalga oshiradi.

Ammo, agar siz tayinlashlarni turli asinxron kontekstlarda (masalan, turli setTimeout yoki va'dalarda) bajarsangiz, har bir o'zgarish alohida qayta chizishni chaqirishi mumkin.

Shunday qilib, "bir kod blokida ketma-ket data qiymatlarini ko'paytirish" holatida Vue ehtimol bir qayta chizishni amalga oshiradi, u barcha o'zgarishlarni aks ettiradi. Ammo, reaktiv ma'lumotlarni o'zgartirish har doim yangilashni rejalashtirishga olib keladi va oxir-oqibat DOMning qayta chizilishiga sabab bo'ladi.