Vue异步更新DOM及$nextTick执行机制源码分析
Vue异步更新DOM策略
我们知道,Vue实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新。
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环 “tick" 中,Vue 刷新队列并执行实际(已去重的)工作。
$nextTick执行机制
$nextTick会在DOM更新之后被触发,以获取最新DOM节点。
具体来讲:我们使用 JavaScript 进行原生DOM操作时,随着 JavaScript 代码执行会同步进行DOM更新;而使用 Vue 则会异步更新 DOM,会在当前执行栈的最后更新DOM。
对于兼容的浏览器来说,nextTick相当于是微任务,即$nextTick的回调函数是在当前执行栈的所有同步任务执行完毕后再执行,所以nextTick中会得到 DOM 更新后的结果。(不过页面渲染始终是在微任务执行之后才进行的,所以$nextTick回调函数执行时页面还没有进行渲染,回调函数执行时在页面上看不到更新后的结果)
注:浏览器如果不兼容则有几种备选方案,其中setTimeout是最后的一种备选方案,它会将回调函数加入任务队列 task 中,等待执行。
示例详解
JavaScript原生DOM操作(随着JS代码的执行同步进行DOM更新):
- 100
- 200
- 300
Vue异步更新DOM:
- {{ item }}
Vue异步更新DOM的目的
因为如果同步进行DOM更新,则每次对响应式数据进行修改就都会触发setter -> 通知watcher -> 触发re-render -> 生成new vnode(vdom) -> patch(更新真实DOM)。
如果每次修改数据都会走一遍这个流程是非常消耗性能的,所以使用异步更新 DOM 的策略,先对数据修改进行整合,再使用最终的整合结果一次性对 DOM 进行更新。