首先我们看到这个是利用了闭包的特性，返回queueNextTick，所以我们实际调用的nextTick其实就是调用queueNextTick，一调用这个方法，就会把nextTick的回调放入队列callbacks当中，等到合适的时机，会将callbacks中的所有回调取出来执行，以达到延迟执行的目的。为啥要用闭包呢，我觉得有两个原因：
1、共享变量，比如callbacks、pending和timerFunc。
2、避免反复判断，即是避免反复判断timerFunc是利用Promise还是利用MutationObserver或是setTimeout来实现异步，这是函数柯里化的一种运用。
这里有两个最主要的方法需要解释下：
1、 nextTickHandler
这个函数，就是把队列中的回调，全部取出来执行，类似于microtask的任务队列。我们通过调用Vue.$nextTick就会把回调全部放入这个队列当中，等到要执行的时候，调用nextTickHandler全部取出来执行。
2、 timerFunc
这个变量，它的作用就是通过Promise/Mutationobserver/Settimeout把nextTickHandler放入到真正的任务队列当中，等到事件循环结束，就从任务队列当中取出nextTickHandler来执行，nextTickHandler一执行，callbacks里面的所有回调就会被取出来执行来，这样就达到来延迟执行nextTick传的回调的效果。
通过这个简单的源码分析，我们可以得出两个结论
1、nextTick会根据不同的执行环境，异步任务可能为microtask或者macrotask，而不是固定不变的。所以，如果你想让nextTick里面的异步任务统统看成是microtask的话，你会遇到坑的。
2、nextTick的并不能保证一定能获取得到更新后的dom，这取决于你是先进行数据赋值还是先调用nextTick。比如：
new Vue({ el: '#app', data() { return { id: 2 } }, created() { }, mounted() { this.$nextTick(() => { console.log(document.getElementById('id').textContent) // 这里打印出来的是2，因为先调用了nextTick }) this.id = 3 } })
结论
如果想要获取更新后的DOM或者子组件（依赖父组件的传值），可以在更新操作之后立即使用Vue.nextTick(callback)，注意这里的先后顺序，先进行更新操作，再调用nextTick获取更新后的DOM/子组件，源码里面我们知道nextTick是无法保证一定是能够获取得到更新后的DOM/子组件的
以上所述是小编给大家介绍的vue中的nextTick的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: