Sobes.tech
Middle

Bude při vícenásobném přiřazení hodnot v data docházet k rerenderu?

sobes.tech AI

Odpověď od AI

Ano, stane se. I když ne při každém přiřazení.

Vue používá reaktivní systém. Když přiřadíte novou hodnotu reaktivní vlastnosti v data, Vue sleduje tuto změnu.

Po sobě jdoucí změny ve stejném bloku kódu (například v obslužné rutině události nebo v hooku životního cyklu) obvykle vedou k jedné naplánované aktualizaci (pře-renderování). Vue tyto změny bufferuje a aplikuje je asynchronně v následujícím "ticku" aktualizačního cyklu, aby zabránil nadbytečným pře-renderováním.

Příklad:

// Vue komponenta
export default {
  data() {
    return {
      count: 0,
      message: 'Ahoj'
    };
  },
  methods: {
    updateData() {
      // Dvě po sobě jdoucí přiřazení
      this.count = this.count + 1;
      this.message = 'Aktualizováno: ' + this.count;
      // Vue zde naplánuje *jedno* pře-renderování DOM při příštím "ticku"
    }
  }
}

V tomto příkladu se obě změny (this.count a this.message) stanou v reaktivních datech, ale Vue provede pouze jedno pře-renderování po dokončení vykonání updateData (nebo přesněji, v příštím "ticku").

Nicméně, pokud provádíte přiřazení v různých asynchronních kontextech (například v různých setTimeout nebo promisech), může každá taková změna potenciálně vyvolat samostatné pře-renderování.

Takže při "vícenásobném přiřazení hodnot do data za sebou" uvnitř jednoho synchronního bloku Vue pravděpodobně provede jedno pře-renderování, které odráží všechny změny. Ale samotný fakt, že měníte reaktivní data, vždy vede k plánování aktualizace, což nakonec povede k pře-renderování DOM.