简述Vue data 中某一个属性的值发生改变后,视图会立即同步执 行重新渲染吗 ?

当 Vue 中 data 的某一个属性值发生改变后,视图并不会立即重新渲染。Vue 实现了一种异步队列更新机制,当数据发生变化时,Vue 会开启一个队列,并将所有的数据变化都缓存到这个队列中。如果同一个 watcher 被多次触发,只会被推入到队列中一次。然后,在下一个事件循环 “tick” 中,Vue 刷新队列并执行实际(已去重的)工作。

这种在缓冲期间去重和异步执行更新的机制有两个好处:

  1. 避免不必要的计算和 DOM 操作。例如,你可能有十次数据改变,但实际上只需要一次渲染,因为最后一次数据改变可能覆盖了前面九次的结果。

  2. 在同一堆栈帧内允许更改多个依赖项,而无需立即重新计算或重新渲染,例如 this.a = 1; this.b = 2;

如果你想在 DOM 更新之后立即执行某些操作,可以使用 Vue.nextTick(callback)。这个 callback 将在 DOM 更新完成后被调用。

发表评论

后才能评论