官方文件表示:為了在資料變化之後等待vue完成更新dom,可以在資料變化之後立即執行vue.$nexttick(callback)
,這樣**函式就可以在資料變化之後立即執行。
這段話的意思是:
例如:存在
}
// 假如此時message的值是 hi
當我們對data()}
中的值進行賦值修改時(例:this.message = 'hello'
),雖然資料變化了,但是其實dom上的內容並未改變,所以如果此時通過原生js獲取這個div的innerhtml時,它的值仍是'hi',而不是賦值修改後的'hello'。
this.message = 'hello';
console.log(this.message); // hello, 資料發生了變化
alert(document.getelementbyid('test').innerhtml); // hi, dom還未發生變化
而如果我們在修改了資料之後就想要馬上對變化更新後的dom進行操作,就需要在this.$nexttick(callback)
中呼叫:
this.message = 'hello';
console.log(this.message); // hello, 資料發生了變化
this.$nexttick(() => )
這個例子可能看起來沒什麼實際用途,另乙個例子:
當我們需要通過某個值(假設:show_login_register
)來對顯示的內容(是顯示登入框還是註冊框)進行判斷(v-if,v-else
),並需要獲取變化後的內容的clientheight
來做定位設定,此時,如果我們在show_login_register
的值被賦值改變後就直接獲取內容的clientheight
,此時,內容還是原來的登入框(假設是想要從登入框變成註冊框),如果我們想要獲取到變化後的內容(註冊框的clientheight
),就需要在this.$nexttick
的**函式中做操作。
實現原理:
vue其實是非同步執行dom更新的。
1、只要觀察到資料變化,vue將開啟乙個佇列,並對同一事件迴圈中發生的所有資料變化做緩衝。
2、如果同乙個watcher被多次觸發(即乙個變數在一次事件迴圈中被賦值變化了多次),則只會推入佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和dom操作非常重要。
3、然後,在下乙個的事件迴圈"tick"中,vue重新整理佇列並執行實際(已去重的)工作(即更新dom)。
vue在內部嘗試對非同步佇列使用原生的promise.then
和mutationobserver
(這個是html 5新加的乙個功能,其功能是監聽dom節點的變動,在所有dom變動完成後,執行**函式),如果執行環境不支援,會採用settimeout(fn,0)
代替。
vue的nextTick的實現
vue的nexttick是用瀏覽器支援的方法模擬nodejs的process.nexttick 老版本的vue用如下方法來模擬 promise.then mutationobserver mutationobserver由於相容性原因被下課 settimeout fn,0 新版本的vue用如下方法來...
關於vue中的nextTick深入理解
nexttick的由來 由於vue的資料驅動檢視更新,是非同步的,即修改資料的當下,檢視不會立刻更新,而是等同一事件迴圈中的所有資料變化完成之後,再統一進行檢視更新。nexttick的觸發時機 在同一事件迴圈中的資料變化後,dom完成更新,立即執行nexttick callback 內的 應用場景 ...
關於nextTick的理解
首先先看一下官方的解釋 this.nexttick 將 延遲到下次 dom 更新迴圈之後執行。在修改資料之後立即使用它,然後等待 dom 更新。它跟全域性方法 vue.nexttick 一樣,不同的是 的 this 自動繫結到呼叫它的例項上。我的理解 在this.nexttick外面,獲取的資料有可...