nextTick的了解
2021-03-15 本文已影响0人
Viewwei
- 官方定义
在下次 DOM 更新循环结束之后执行延时回调,在修改数据之后使用这个方法,获取更新后的最新 DOM - nextTick是 Vue 提供的一个全局 Api,由于 vue 的异步更新策略导致我们修改数据不会立即体现在 DOM 的变化上,此时如果想要立即获取更新后的 DOM 状态,就需要使用这个方法
- Vue 在更新 DOM 的时候是异步的,只要我们监听到数据的变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生所以数据变更,如果一个 watcher 被多次触发,只会被推入到队列中一次.这种在缓冲时去重对于不必要的计算和 DOM 操作是非常重要的,nextTick 方法中添加回调方法会在队列中加入一个回调函数,确保在前面的 DOM 操作完成之后才调用
- nextTick 简单原理是:它会在 callbacks 里面加入我们的回调函数,然后子啊 timeFunc 异步方式调用他们,首先选择的是 Promise.这样就可以在 nextTick 中看到 dom 操作结果