Is lesz újrarenderelés, ha többszörösen értékeket rendelünk a data-hoz?

Igen, megtörténik. Bár nem minden hozzárendelésnél.

A Vue reaktív rendszert használ. Amikor új értéket rendelünk hozzá egy reaktív tulajdonsághoz a data-ban, a Vue nyomon követi ezt a változást.

Az egymást követő változtatások ugyanabban a kódrészletben (például egy eseménykezelő vagy életciklus hook belsejében) általában egy ütemezett frissítéshez (újrarendereléshez) vezetnek. A Vue ezeket a változásokat puffereli, és aszinkron módon alkalmazza a következő "tick"-ben az aktualizációs ciklusban, hogy elkerülje a redundáns újrarendereléseket.

Példa:

// Vue komponens
export default {
  data() {
    return {
      count: 0,
      message: 'Szia'
    };
  },
  methods: {
    updateData() {
      // Két egymást követő hozzárendelés
      this.count = this.count + 1;
      this.message = 'Frissítve: ' + this.count;
      // Itt a Vue *egy* DOM frissítést tervez a következő "tick"-ben
    }
  }
}

Ebben a példában mindkét változás (this.count és this.message) reaktív adatokban történik, de a Vue csak egyszer fog újrarenderelni, miután az updateData végrehajtása befejeződött (vagy, pontosabban, a következő "tick"-ben).

Azonban, ha különböző aszinkron kontextusokban (például különböző setTimeout vagy promise-ekben) hajtasz végre hozzárendeléseket, minden ilyen változás potenciálisan külön újrarenderelést okozhat.

Tehát, az "egymást követő érték hozzárendelése a data-ban" egy szinkron blokkban valószínűleg egy újrarenderelést fog eredményezni, amely tükrözi az összes változást. De az, hogy reaktív adatokat módosítasz, mindig az frissítés ütemezéséhez vezet, ami végül DOM újrarendereléséhez vezet.