轉：Vue.js（22）之 nextTick()

簡單理解Vue中的nextTick

 

nextTick的主要應用的場景及緣由

在Vue生命週期的  created()鉤子函數 進行的DOM操做必定要放在 Vue.nextTick() 的回調函數中

• 解釋：在created()鉤子函數執行的時候 DOM 其實並未進行任何渲染，而此時進行 DOM 操做無異於徒勞，因此此處必定要將DOM操做的js代碼放進Vue.nextTick()的回調函數中。

• 與之對應的就是mounted()鉤子函數，由於該鉤子函數執行時全部的 DOM 掛載和渲染都已完成，此時在該鉤子函數中進行任何 DOM 操做都不會有問題

在數據變化後要執行的某個操做，而這個操做須要使用隨數據改變而改變的DOM結構的時候，這個操做都應該放進Vue.nextTick()的回調函數中。

 

Vue 的官方文檔中詳細的解釋：

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更新完成後調用。