Zal er een her-render plaatsvinden bij meervoudige toewijzing van waarden aan data?

Ja, dat zal gebeuren. Hoewel niet bij elke toewijzing.

Vue gebruikt een reactief systeem. Wanneer je een nieuwe waarde toewijst aan een reactieve eigenschap in data, volgt Vue deze verandering.

Sequentiële veranderingen binnen hetzelfde codeblok (bijvoorbeeld, binnen een event handler of een lifecycle hook) leiden meestal tot één geplande update (her-render). Vue buffert deze veranderingen en past ze asynchroon toe in de volgende "tick" van de updatecyclus, om overbodige her-renderings te voorkomen.

Voorbeeld:

// Vue component
export default {
  data() {
    return {
      count: 0,
      message: 'Hallo'
    };
  },
  methods: {
    updateData() {
      // Twee opeenvolgende toewijzingen
      this.count = this.count + 1;
      this.message = 'Bijgewerkt: ' + this.count;
      // Vue plant hier *één* DOM-update in de volgende "tick"
    }
  }
}

In dit voorbeeld zullen beide wijzigingen (this.count en this.message) plaatsvinden in reactieve data, maar Vue voert slechts één her-render uit nadat updateData is voltooid (of, preciezer, in de volgende "tick").

Echter, als je toewijzingen uitvoert in verschillende asynchrone contexten (bijvoorbeeld binnen verschillende setTimeout of promises), kan elke wijziging mogelijk een aparte her-render veroorzaken.

Dus, bij "meerdere toewijzingen van waarden in data achter elkaar" binnen één synchrone blok, zal Vue waarschijnlijk één her-render uitvoeren die alle veranderingen weerspiegelt. Maar het feit dat je reactieve data wijzigt, leidt altijd tot een planning van de update, die uiteindelijk tot een DOM-her-rendering zal leiden.