Will there be a re-render when assigning multiple values to data consecutively?
sobes.tech AI
Answer from AI
Yes, it will. Although not on every assignment.
Vue uses a reactive system. When you assign a new value to a reactive property in data, Vue tracks this change.
Sequential changes within a single block of code (for example, inside an event handler or a lifecycle hook) generally lead to one scheduled update (re-render). Vue buffers these changes and applies them asynchronously on the next update cycle "tick" to avoid redundant re-renders.
Example:
// Vue component
export default {
data() {
return {
count: 0,
message: 'Hello'
};
},
methods: {
updateData() {
// Two consecutive assignments
this.count = this.count + 1;
this.message = 'Updated: ' + this.count;
// Vue will schedule *one* DOM update on the next tick
}
}
}
In this example, both changes (this.count and this.message) occur in reactive data, but Vue will perform only one re-render after updateData completes (or, more precisely, on the next tick).
However, if you perform assignments in different asynchronous contexts (for example, inside different setTimeout or promises), each such change can potentially trigger a separate re-render.
Thus, when "multiple assignments of values to data in a row" are made within a single synchronous block, Vue is likely to perform one re-render that reflects all changes. But the fact of changing reactive data always leads to scheduling an update, which ultimately results in a DOM re-render.