Sobes.tech
Middle

Bude pri viacerých priradeniach hodnôt v data dôjsť k rerenderu?

sobes.tech AI

Odpoveď od AI

Áno, stane sa. Hoci nie pri každom priradení.

Vue používa reaktívny systém. Keď priradíte novú hodnotu reaktívnej vlastnosti v data, Vue sleduje túto zmenu.

Sekvenčné zmeny v rovnakom bloku kódu (napríklad v obsluhe udalosti alebo v hooku životného cyklu) zvyčajne vedú k jednej naplánovanej aktualizácii (znovu vykresleniu). Vue tieto zmeny bufferuje a aplikuje ich asynchrónne v nasledujúcom "ticku" aktualizačného cyklu, aby sa predišlo nadbytočným znovu vykresleniam.

Príklad:

// Vue komponent
export default {
  data() {
    return {
      count: 0,
      message: 'Ahoj'
    };
  },
  methods: {
    updateData() {
      // Dve po sebe idúce priradenia
      this.count = this.count + 1;
      this.message = 'Aktualizované: ' + this.count;
      // Vue naplánuje *jedno* znovu vykreslenie DOM v nasledujúcom "ticku"
    }
  }
}

V tomto príklade obe zmeny (this.count a this.message) nastanú v reaktívnych dátach, ale Vue vykoná iba jedno znovu vykreslenie po dokončení vykonávania updateData (alebo, presnejšie, v nasledujúcom "ticku").

Avšak, ak vykonávate priradenia v rôznych asynchrónnych kontextoch (napríklad v rôznych setTimeout alebo promise), každá taká zmena môže potenciálne spôsobiť samostatné znovu vykreslenie.

Preto, pri "viacerých priradeniach hodnôt do data za sebou" v rámci jedného synchronného bloku, Vue pravdepodobne vykoná jedno znovu vykreslenie, ktoré odráža všetky zmeny. Ale samotný fakt, že meníte reaktívne dáta, vždy vedie k plánovaniu aktualizácie, čo nakoniec povedie k znovu vykresleniu DOM.