[nextTick的基本概念|青训营笔记]

113 阅读1分钟

nextTick是Vue中提供的一個全局API,是在下一次DOM更新循環結束之後執行延遲回調,在修改數據之後使用$nextTice則可以在回調中獲取更新後的DOM。

         Vue在更新DOM的時候是異步執行的。只要偵聽到數據的變化,Vue將自動開啟一個隊列,並混存在同一事件中發生的所有數據的變更,。如果同一個watcher被多次觸發,只會被推入到隊列中1次。這種在緩衝時去除重複數據對於避免不必要的計算和DOM操作是非常重要的。nextTick方法會在隊列中加入一個回調函數,確保該函數在前面的dom操作完成後才開始調用。

         簡單來說,nextTice主要用於處理數據動態變化後,DOM還沒有及時更新的問題,用它就可以獲取數據更新後最新的DOM變化。

         適用場景,第一種,有時需要根據數據動態為頁面中的某些DOM元素添加事件,這就要求在DOM元素渲染完畢時區設置,但是created與mounted函數執行的時候DOM並沒有渲染完畢,所有就會出現獲取不到,添加不了事件的問題,這個時候就要用到nextTice進行處理。

         第二種,在使用某個第三方插件的時候,希望vue生成的某些DOM動態發生變化的時候重新使用該插件,也會用到該方法,這時候就需要在$nextTick的回調函數中執行重新應用插件的方法。

       第三種,數據改变變後獲取焦點,使用$nextTick來知道什麼時候更新DOM完成的。

       Vue在觀察到數據變化後並不是直接去更新DOM,而是開啟一個隊列,並緩衝在同一個事件循環匯總發生的所有數據改變,在緩衝的時候去除重複的數據。在下一個事件循環tick中,Vue刷新隊列並執行實際(已經去重的工作)。所以如果你用一個for循環來動態改變數據一百次,其實它只會應用最後一次改變,如果沒有這種機制,DOM就要重繪100次,這是一個很大的開銷。