Vue.nextTick的原理跟源码

58 阅读1分钟

Vue的 nextTick 的实现原理总结如下

nextTick 是 Vue 提供的一个全局的API ,由于Vue的异步更新策略导致我们对数据的修改不会立马体现到都没变化上,此时如果想要立即获取更新后的dom的状态,就需要使用这个方法。Vue在更新dom时是异步执行的。只要监听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓存时去重对于避免不必要的计算和dom操作是非常重要的。nextTick方法会在队列中加入一个回调函数,确保该函数在前面的dom操作完成后才调用。

Vue的 nextTick 的源码总结如下

D}4E6FLF`GDJ35VEATRRTCT.png