官方文档对 nextTick 的功能如下说明:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;
理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,
nextTick()的原理:
当调用nextTick方法时会传入两个参数,回调函数和执行回调函数的上下文环境,如果没有提供回调函数,那么将返回promise对象。首先将拿到的回调函数存放到数组中,判断是否正在执行回调函数,如果当前没有在pending的时候,就会执行timeFunc,多次执行nextTick只会执行一次timerFunc,timeFunc其实就是执行异步的方法,在timeFunc方法中选择一个异步方法(首先判断是否支持promise,如果支持就将flushCallbacks放在promise中异步执行,并且标记使用微任务。如果不支持promise就看是否支持MutationObserver方法,如果支持就new了一个MutationObserver类,创建一个文本节点进行监听,当数据发生变化了就会异步执行flushCallbacks方法。如果以上两个都不支持就看是否支持setImmediate方法,如果支持setImmediate 就去异步执行flushCallbacks方法。如果以上三种方法都不支持,就使用setTimeout),然后异步去执行flushCallbacks方法,flushCallbacks中就是将传递的函数依次执行。
nextTick多次调用会维持一个数组,之后会异步的把数组中的方法以此执行,这样的话用户就会在视图更新之后再获取到真实的dom元素。
原理简述: nextTick 是 Vue 提供的一个全局的API ,由于Vue的异步更新策略导致我们对数据的修改不会立马体现到都没变化上,此时如果想要立即获取更新后的dom的状态,就需要使用这个方法。
· Vue在更新dom时是异步执行的。只要监听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓存时去重对于避免不必要的计算和dom操作是非常重要的。nextTick方法会在队列中加入一个回调函数,确保该函数在前面的dom操作完成后才调用。
nextTick和$nextTick区别
1.nextTick(callback):当数据发生变化,更新后执行回调。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
2.$nextTick(callback):当dom发生变化,更新后执行的回调。将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
3.这两个方法没有太大的不同。区别在于:nextTick(callback) 是全局的方法;而 $nextTick(callback) 是回调的 this 自动绑定到调用它的实例上;所以用的更多的是$nextTick(callback)!
网友评论