Vue.nextTick官方文档:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
言外之意,Vue中的DOM(view)都不是在修改model之后马上更新的,而是一个异步的更新过程:在修改了model之后,把这些数据的修改全部 push 到一个队列里,然后内部调用 一次 nextTick 去更新视图。
为了了解每次tick/loop的流程,得先从宏任务和微任务开始说起:
宏任务:setTimeout,setInterval,IO,整个<script>(重要)
微任务:Promise,process.nextTick等等
那么一次事件循环(称作Tick或Loop)如下图:
- 开始执行,首先执行第一个宏任务:全局<script></script>中的代码,遇到异步代码就交给相应的异步工作线程执行;
- 执行到</script>,结束第一个宏任务,查看微任务队列,若有微任务,按顺序清空。若没有微任务,就执行UI Render渲染DOM,此时就完成了一次Loop/Tick;
- 继续查找宏任务队列并执行
由此看出,并不是很多文章所谓的先执行微任务再执行宏任务!而是执行下一个宏任务之前,必须把微任务队列给清空了!而进入代码执行的第一个任务就是宏任务(script整体)!而每执行一个宏任务,就是一个新的Loop/Tick
先来个简单例子:
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);