在vue中$nextTick 原理及作用

Vue 的 nextTick 其本質是對 JavaScript 執行原理 EventLoop 的一種應用。
nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法來模擬對應的微/宏任務的實現，本質是為了利用 JavaScript 的這些異步回調任務隊列來實現 Vue 框架中自己的異步回調隊列。
nextTick 不僅是 Vue 內部的異步隊列的調用方法，同時也允許開發者在實際項目中使用這個方法來滿足實際應用中對 DOM 更新數據時機的后續邏輯處理
nextTick 是典型的將底層 JavaScript 執行原理應用到具體案例中的示例，引入異步更新隊列機制的原因∶
1.如果是同步更新，則多次對一個或多個屬性賦值，會頻繁觸發 UI/DOM 的渲染，可以減少一些無用渲染
2.同時由于 VirtualDOM 的引入，每一次狀態發生變化后，狀態變化的信號會發送給組件，組件內部使用 VirtualDOM 進行計算得出需要更新的具體的 DOM 節點，然后對 DOM 進行更新操作，每次更新狀態后的渲染過程需要更多的計算，而這種無用功也將浪費更多的性能，所以異步渲染變得更加至關重要
Vue采用了數據驅動視圖的思想，但是在一些情況下，仍然需要操作DOM。有時候，可能遇到這樣的情況，DOM1的數據發生了變化，而DOM2需要從DOM1中獲取數據，那這時就會發現DOM2的視圖并沒有更新，這時就需要用到了nextTick了。
由于Vue的DOM操作是異步的，所以，在上面的情況中，就要將DOM2獲取數據的操作寫在$nextTick中。

this.$nextTick(() => {    // 獲取數據的操作...})