Vue文檔中對nextTick關於nextTick的介紹語焉不詳,官網的解釋如下:
在下次 DOM 更新循環結束之後執行延遲迴調。在修改數據之後立即使用這個方法,獲取更新後的 DOM
那麼nextTick的應用場景是什麼?光說不練假把式,先上代碼。
測試代碼很簡單,重點在於 methods裡面的changeMsg方法。
- 我們修改了data裡的message的數據。
- 我們希望messageOne能夠獲取到DOM元素 messageDiv裡面的內容。
那麼我們再看下運行結果看看是不是我們想要的
我們看到 使用了this.nextTick方法的結果是我們想要的結果,而直接獲取數據的方式並沒有拿到最新的數據。
我們為什麼要使用nextTick呢?
官網中的解釋如下:
Vue 異步執行 DOM 更新。只要觀察到數據變化,Vue 將開啟一個隊列,並緩衝在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發,只會被推入到隊列中一次。這種在緩衝時去除重複數據對於避免不必要的計算和 DOM 操作上非常重要。然後,在下一個的事件循環“tick”中,Vue 刷新隊列並執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和MessageChannel,如果執行環境不支持,會採用 setTimeout(fn, 0)代替。
例如,當你設置 vm.someData = 'new value',該組件不會立即重新渲染。當刷新隊列時,組件會在下一個事件循環“tick”中更新。多數情況我們不需要關心這個過程,但是如果你想基於更新後的 DOM 狀態來做點什麼,這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員使用“數據驅動”的方式思考,避免直接接觸 DOM,但是有時我們必須要這麼做。為了在數據變化之後等待 Vue 完成更新 DOM,可以在數據變化之後立即使用 Vue.nextTick(callback)。這樣回調函數將在 DOM 更新完成後被調用。
說了一大堆,總結一下(面試的時候可能用被問到)到簡單概況起來就是:
- Vue中DOM的更新是異步的。
- 雖然Vue一直強調的是數據驅動視圖,但是,有時候不可避免要操作DOM的。
- 在數據變化之後等待 Vue 完成更新 DOM這是一個異步執行的過程,需要用nextTick來搞定。
nextTick使用情景
在Vue生命週期的created()鉤子函數進行的DOM操作的時候需要要放在Vue.nextTick()的回調函數中。
為啥呢?如果不熟悉created()鉤子的話可以再翻看一下Vue的生命週期,created函數執行的時候DOM元素還沒有進行過渲染,這個時候操作DOM毛用也沒有,所以需要將DOM操作放在Vue.nextTick()的回調方法中去搞定。
當然你可以選擇在mounted()鉤子裡去操作DOM,這個時候所有的DOM都掛載到跟元素上並渲染完畢了。這個時候操作DOM元素是沒有任何問題的。
數據變化後要執行的某個操作,而這個操作需要使用隨數據改變而改變的DOM結構的時候,這個操作都應該放進Vue.nextTick()的回調函數中。
nextTick 函數的實現原理
簡單說說面試的時候可以拿去吹牛逼。寫太多怕大家也不喜歡看。
- 先定義了一個callbacks 存放所有的nextTick裡的回調函數
- 然後判斷一下當前的瀏覽器內核是否支持 Promise,如果支持,就用Promise來觸發回調函數
- 如果不支持Promise再看看是否支持MutationObserver,是一個可以監聽DOM結構變化的接口,觀察文本節點發生變化時,觸發執行所有回調函數。
- 如果以上都不支持就只能用setTimeout來完成異步執行了。
閱讀更多 前端講書人麥克黑 的文章