Javascript事件循环(4)：事件循环在Vue中的实践应用

在上几次讲完事件循环的理论基础之上，来看看事件循环在Vue框架中可以怎样应用，Vue在更新DOM时是异步执行的，为了在数据变化之后等待Vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数将在DOM更新完成后被调用。

下面我们来看一个例子：

        在DOM中渲染出4个列表（请暂时忽略eslint的提示～）

 用例设计：

1. 通过list1，2，3验证处在同步代码中的DOM更新情况及nextTick的触发时机。

2. 通过list3、list4验证，同步代码及异步代码中Dom更新及nextTick触发的区别。
   

在同步调用的composeList12中，同步更新了list1和list2。在composeList34中，同步更新了list3，通过setTimeout异步更新了list4。执行结果是这样的：

可以验证：

1. 所有同步代码的数据更新都是在同一个事件循环中执行，再来依次执行nextTick所调用的回调，并且nextTick回调执行的时候，DOM已经更新。

2. 从tick1&2、tick3、test取到li个数都为3可以看出，在同一事件循环中调用的nextTick所取到DOM都是相同的。
   

3. 从list4和tick4的执行时机可以看出，每个异步callback最后都会处在一个独立的事件循环中，对应自己独立的nextTick。

4. 在首屏渲染、用户交互过程中，要巧用同步环境及异步环境；首屏展现的内容，尽量保证在同步环境中完成；其他特别占用内存的任务，可以使用setTimeout来解决。让浏览器先喘口气，渲染完后在下一个任务周期中来处理占用内存或CPU较多的任务，就可以解决渲染卡端的问题，从而保证性能、体验。

参考：

1.https://node.fequan.com/playvideo/701606bc91ec9cfed63dd2c6732dc5a8_7?from=timeline&isappinstalled=0

2.https://www.cnblogs.com/hity-tt/p/6729118.html