定义[nextTick、事件循环]
nextTick的由来：
由于vue的数据驱动视图更新是异步的，即修改数据的当下，视图不会立即更新，而是等同一事件循环中的所有数据变化完成之后再统一进行视图更新。
nextTick的触发时机：
在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调
应用场景：
需要在视图更新之后，基于新的视图进行操作。
事件循环：
以上出现了事件循环的概念，其涉及到JS的运行机制，包括主线程的执行栈、异步队列、异步API、事件循环的协作。大致理解：主线程完成同步环境执行，查询任务队列、提取队首任务、放入主线程中执行；执行完毕再重复该操作，该过程称为事件循环。而主线程的每次读取任务队列操作，是一个事件循环的开始。异步callback不可能处于同一事件循环中。简单总结事件循环：同步代码执行->查找异步队列、推入执行栈、执行callback1[事件循环1]->查找异步队列、推入执行栈。执行callback2[事件循环2]...即每个异步callback最终都会形成自己独立的一个事件循环。结合nextTick的由来，可以推出每个事件循环中，nextTick的触发时机：同一事件循环中的代码执行完毕->DOM更新->nextTick callback触发
tips:本文的任务队列、消息队列、异步队列指同一个东西，均指macrotask queue
事件循环详解：实例理解nextTick的使用，并给出在页面渲染上的优化巧用
tips：代码的正确阅读方式 看template组成、跳过script代码、看代码后面的用例设计、看之后的代码分析、同时回头结合script代码理解
- { {item}}
- { {item}}
- { {item}}
- { {item}}
- { {item}}
2.1、用例设计
用例1：通过list1、2、3验证，处在同步代码中的DOM更新情况及nextTick的触发时机；
用例2：通过list3、list4验证，同步代码及异步代码中Dom更新及nextTick触发的区别； 用例3：通过list4、list5对比验证，多个异步代码中nextTick触发的区别； 用例4：通过在视图更新后获取DOM中li的数量，判断nextTick序列渲染的时间点。2.2、代码分析
函数执行步骤：
事件循环1: step1: this.composeList12() -> update list1, update list2 -> 绑定tick’1&2’ step2: this.composeList34() -> update list3, 设置异步1setTimeout1 -> 绑定tick’3’ step3: this.composeList5() -> 绑定tick’5-1’ -> 设置异步2setTimeout2 step4: 绑定tick’test’ 事件循环2: 将setTimeout1的callback推入执行栈 -> update list4 -> 绑定tick’4’ 事件循环3: 将setTimeout2的callback推入执行栈 -> update list5 -> 绑定tick’5’2.3、推断输出消息
由于同一事件循环中的tick按执行顺序，因此消息输出为即：
［同步环境］update list1 -> update list2 -> update list3 -> tick‘1&2’ -> tick‘3’ -> tick’5-1’ -> tick’test’ ［事件循环1］->update list4 -> tick’4’ [事件循环2] ->update list5 -> tick’5’2.4、实际运行结果如下图
2.5、总结
从用例1得出：
1、在同一事件循环中，只有所有的数据更新完毕，才会调用nextTick 2、 仅在同步执行环境数据更新完毕，DOM才开始渲染，页面才开始展现。 3、在同一事件循环中，如果存在多个nextTick，将会按照最初的执行顺序调用。从用例1-4得出： 1、从同步执行环境中的四个tick对应的li数量均为30000可看出，同一事件循环中，nextTick所在的视图是相同的。从用例2得出： 1、只有同步环境执行完毕、DOM渲染完毕，才会处理异步callback从用例3得出： 1、每个异步callback最后都会处在一个独立的事件循环中，对应自己独立的nextTick巧用：
从用例1结论中可得出： 这个事件环境中的数据变化完成，再进行渲染[视图更新]，可以避免DOM的频繁变动，从而避免了因此带来的浏览器卡顿，大幅度提升性能。 在首屏渲染、用户交互的过程中，要巧用同步环境及异步环境；首屏展现的内容，尽量保证在同步环境中完成；其他内容，拆分到异步中，从而保证性能、体验。tips：
可产生异步callback的有：promise（microtask queue）、setTimeout、MutationObserver、DOM事件、Ajax等 vue DOM的视图更新实现，使用到了ES6的Promise及HTML5的，当环境不支持时，使用setTimeout(fn,0)替代。上述的三种方法，均为异步API。其中MutationObserver类似事件，又有所区别；事件时同步触发的，其为异步触发，即DOM发生变化之后，不会立刻触发，等当前所有的DOM操作都结束后触发。事件循环、任务队列详解：
原文链接