Sobes.tech
Middle

Veri üzerinde ardışık çoklu atamalar yapıldığında yeniden render olacak mı?

sobes.tech yapay zeka

AI'dan gelen yanıt

Evet, olacak. Her atama sırasında değil, ama.

Vue reaktif bir sistem kullanır. data içindeki reaktif bir özelliğe yeni bir değer atadığınızda, Vue bu değişikliği izler.

Aynı kod bloğunda ardışık değişiklikler (örneğin, bir olay işleyicisi veya yaşam döngüsü kancası içinde) genellikle bir planlanmış güncellemeye (yeniden render) yol açar. Vue bu değişiklikleri tamponlar ve güncelleme döngüsünün bir sonraki "tick"'inde asenkron olarak uygular, böylece gereksiz yeniden render'ları önler.

Örnek:

// Vue bileşeni
export default {
  data() {
    return {
      count: 0,
      message: 'Merhaba'
    };
  },
  methods: {
    updateData() {
      // Ardışık iki atama
      this.count = this.count + 1;
      this.message = 'Güncellendi: ' + this.count;
      // Vue burada *bir* DOM güncellemesini planlar
    }
  }
}

Bu örnekte, her iki değişiklik (this.count ve this.message) reaktif verilerdedir, ancak Vue updateData'nın tamamlanmasından sonra (veya daha doğrusu, bir sonraki tick'te) sadece bir yeniden render yapacaktır.

Ancak, farklı asenkron bağlamlarda (örneğin, farklı setTimeout veya promise içinde) atamalar yaparsanız, her değişiklik potansiyel olarak ayrı bir yeniden render tetikleyebilir.

Bu nedenle, "sıralı şekilde data'ya birden fazla değer ataması" aynı senkron blok içinde yapıldığında, Vue muhtemelen bir yeniden render yapacak ve tüm değişiklikleri yansıtacaktır. Ama reaktif verilerin değiştirilmesi her zaman bir güncelleme planlamasına yol açar ve bu da sonunda DOM'un yeniden render edilmesine neden olur.