Vue的this.$nextTick怎么使用

這篇“Vue的this.$nextTick怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue的this.$nextTick怎么使用”文章吧。

nextTick：在下一次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的DOM。它有兩個參數(shù)：第一個參數(shù)是回調(diào)函數(shù)，不傳時提供promise調(diào)用；第二個參數(shù)是執(zhí)行環(huán)境上下文，不傳默認是自動綁定到調(diào)用它的實例上。

我們先看看nextTick究竟是個啥？

console.log(this.$nextTick);
// 控制臺打印
if(fn){
  return nextTick(fn, this);
}

我們可以看出nextTick就是一個方法，方法有兩個參數(shù)：fn和this，fn就是需要傳的回調(diào)函數(shù)，this就是所說的執(zhí)行環(huán)境上下文。那么問題來了，在Vue中是如何實現(xiàn)在下一次DOM更新結(jié)束之后才會執(zhí)行延遲回調(diào)的？ 我們先看看下面的例子：

<div ref="test1">created：{{message}}</div>
// vue實例
data: {
    message: "Hello World!",
},
created(){
    this.message = '你好，世界！';
    console.log(this.$refs.test1.innerText);// 報錯
    // TypeError: Cannot read properties of undefined (reading 'innerText')
    this.$nextTick(()=>{
         console.log('test1 nextTick：',this.$refs.test1.innerText);// 你好，世界！
    });
},

從上面例子中，在created生命周期中操作了DOM，但是我們都知道created生命周期只是初始化了數(shù)據(jù)，這期間是還沒有渲染DOM的，如果我們直接操作DOM是找不到DOM元素的，那么問題來了：為什么放在nextTick中就可以獲取到了DOM元素呢？ 這不是很明顯嗎，等到DOM渲染完才調(diào)用不就獲取到了嗎，從而知道了nextTick作用就是用來等下次DOM渲染完才去調(diào)用nextTick內(nèi)的DOM操作代碼。那么問題又來了，nextTick究竟做了什么？下面我們一起從源碼層面來分別分析Vue2和Vue3版本的nextTick原理是啥。

Vue2版本的nextTick

由于Vue暴露給開發(fā)者的是nextTick這個方法，在這個方法中主要做了三件事，回調(diào)函數(shù)的添加、延遲執(zhí)行回調(diào)函數(shù)、判斷當前的nextTick是否傳入回調(diào)函數(shù)。不傳的話，是一個Promise，this.$nextTick.then(()=>{})，按Promise處理。

• 回調(diào)函數(shù)添加入callbacks數(shù)組，因為可能有多個nextTick函數(shù)在當前作用域中。

• 判斷當前nextTick是否已經(jīng)標記為pending=true，也就是正在執(zhí)行，如果不是就執(zhí)行timerFunc（異步執(zhí)行函數(shù) 用于異步延遲調(diào)用 flushCallbacks 函數(shù)）。timerFunc的執(zhí)行，判斷當前環(huán)境是否支持promise、MutationObserver、setImmediate、setTimeout，優(yōu)先級高低從前到后，分四種情況：

• 優(yōu)先使用Promise，如果當前環(huán)境支持promise，nextTick默認優(yōu)先使用promise去執(zhí)行延遲回調(diào)函數(shù)，timerFunc執(zhí)行的是Promise，promise是es6下的語法，如果當前環(huán)境只支持es6以語法下的，只能考慮后面支持情況了。

• 支持MutationObserver，HTML5的api，中文意思是：修改的監(jiān)聽，MutationObserver用來監(jiān)聽DOM的變動，比如節(jié)點的增減、屬性的變動、文本內(nèi)容的修改等都會觸發(fā)MutationObserver事件。注意地，與事件不同，事件是同步觸發(fā)，DOM的變動會立即觸發(fā)事件，而MutationObserver事件是異步觸發(fā)，DOM不會立即觸發(fā)，需要等當前所有DOM操作完畢才會觸發(fā)。

MutationObserver有7個屬性：childList（true，監(jiān)聽子節(jié)點的變動）、attributes（true，監(jiān)聽屬性的變動）、characterData（true，監(jiān)聽節(jié)點內(nèi)容或節(jié)點文本的變動）、subtree（是否應(yīng)用于該節(jié)點的所有后代節(jié)點）、attributeOldValue（觀察attributes變動時，是否需要記錄變動前的屬性值）、characterDataOldValue（觀察characterData變動時，是否需要記錄變動前的值）、attributeFilter（數(shù)組，表示需要觀察的特定屬性（比如[‘class’,‘src’]）。

為什么需要創(chuàng)建一個文本節(jié)點？因為在這里操作DOM保證瀏覽器頁面是最新DOM渲染的，雖然看來好像是沒什么作用，但這是保證拿到的DOM是最新的。

• 支持setImmediate、setTimeout，setImmediate即時計時器立即執(zhí)行工作，它是在事件輪詢之后執(zhí)行,為了防止輪詢阻塞,每次只會調(diào)用一個。setTimeout按照一定時間后執(zhí)行回調(diào)函數(shù)。

好了好了，到了現(xiàn)在，我們都知道nextTick做了什么吧，但是我們有沒有想過這樣的一個問題：既然都是異步回調(diào)執(zhí)行等待DOM更新后才去調(diào)用操作DOM的代碼，那么這個機制又是什么原理？這就是JS的執(zhí)行機制有關(guān)了，涉及宏任務(wù)與微任務(wù)的知識，我們先來看看這樣的一道題：

console.log('同步代碼1');
setTimeout(function () {
    console.log("setTimeout");
}, 0);
new Promise((resolve) => {
    console.log('同步代碼2')
    resolve()
}).then(() => {
    console.log('promise.then')
})
console.log('同步代碼3');

我們可能會問上面的輸出是個啥，首先js是單線程，所以在js程序運行中只有一個執(zhí)行棧，實現(xiàn)不了多線程，所以就需要任務(wù)均衡分配，通俗的講，按任務(wù)急優(yōu)先處理原則，js中分為同步任務(wù)和異步任務(wù)，異步任務(wù)又分為宏任務(wù)和微任務(wù)，同步任務(wù)先入棧，程序會先把執(zhí)行棧中的所有同步任務(wù)執(zhí)行完，再去判斷是否有異步任務(wù)，而異步任務(wù)中微任務(wù)的優(yōu)先級高于宏任務(wù)。如果當前執(zhí)行棧為空，而微任務(wù)隊列不為空，就先執(zhí)行微任務(wù)，等把所有微任務(wù)執(zhí)行完，最后才會考慮宏任務(wù)。而上面代碼中Promise是屬于微任務(wù)，而setTimeout是宏任務(wù)，所以上面的輸出為：

// 同步代碼1
// 同步代碼2
// 同步代碼3
// promise.then 
// setTimeout

使用Vue2的nextTick

• 傳入回調(diào)函數(shù)參數(shù)使用：

  s.$nextTick(()=>{
    // ...操作DOM的代碼
  })

• 不傳入回調(diào)函數(shù)參數(shù)使用：

• // 方式一
  this.$nextTick().then(()=>{
    // ...操作DOM的代碼
  })
  
  // 方式二
  await this.$nextTick();
  // 后寫操作DOM的代碼

Vue3版本的nextTick

Vue3版本就沒有Vue2版本的那么多環(huán)境支持，nextTick封裝成了一個Promise異步回調(diào)函數(shù)執(zhí)行。

// Vue3.2.45
// core-main\core-main\packages\runtime-core\src
export function nextTick<T = void>(
  this: T,
  fn?: (this: T) => void
): Promise<void> {
  const p = currentFlushPromise || resolvedPromise
  return fn ? p.then(this ? fn.bind(this) : fn) : p
}

使用Vue3的nextTick

• 傳入回調(diào)函數(shù)使用

• import { nextTick } from 'vue' // 引入
  setup () {    
  nextTick(()=>{
     // ...操作DOM的代碼
  })

• 不傳入回調(diào)函數(shù)的使用

• import { nextTick } from 'vue' // 引入
  setup () {    
      // 方式一
      nextTick().then(()=>{
        // ...操作DOM的代碼
      })
  
      // 方式二
      await nextTick();
      // 后寫操作DOM的代碼
  }

以上就是關(guān)于“Vue的this.$nextTick怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。