關於Vue的nextTick的一點小理解

2022-03-11 10:31:48 字數 1582 閱讀 9648

官方文件表示:為了在資料變化之後等待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.thenmutationobserver(這個是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外面,獲取的資料有可...