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較多的任務，就可以解決渲染卡端的問題，進而保證性能、體驗。

參考：