技術標籤：vue.jsjavascript

vue中nextTick探索

一、NextTick是什麼

在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的 DOM。我們可以這麼理解，vue的DOM更新是非同步執行的，當你修改DOM時，不會立即更新DOM,而是開啟一個非同步更新佇列，檢視需要等佇列中所有資料變化完成之後，再統一進行更新。

<div id="app"> {{ message }} </div>

const vm = new Vue({
  el: '#app',
  data: {
    message:
 
 '原始值'
  },
  mounted:{
  	this.message="xxx";
  	console.log(vm.$el.textContent);
  }
})

此時在mounted函式中修改了message的值，但是後續列印還是原來的值，可以看出vue資料雖然修改了，但是DOM還是原來的值，並沒有修改。當屬性值變化時,通過 set 攔截器函式呼叫了 Dep 例項物件的 notify 方法，在這個過程中呼叫nextTick函式將變化放到一個非同步更新佇列中，等本次資料修改完後，統一更新DOM。

應用場景

如果想要在修改資料後立刻得到更新後的DOM結構，可以使用Vue.nextTick()

• 第一個引數為：回撥函式（可以獲取最近的DOM結構）
• 第二個引數為：執行函式上下文
  Vue.nextTick( [callback, context] )
• 引數：
  • {Function} [callback]
  • {Object} [context]
• 用法：

// 修改資料
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作為一個 Promise 使用 (2.1.0 起新增，詳見接下來的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

• 在Vue生命週期的created()鉤子函式進行的DOM操作一定要放在Vue.nextTick()的回撥函式中

• 在資料變化後要執行的某個操作，而這個操作需要使用隨資料改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回撥函式中。

三、實現原理

• 原始碼位置：/src/core/util/next-tick.js

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

nextTick函式將回調任務新增到callbacks佇列中。然後判斷pending是否處於等待重新整理的狀態，當不處於重新整理狀態時，呼叫timerFunc將 flushCallbacks 函式分別註冊為微任務或者巨集任務。在一次事件迴圈中只需要註冊一次。

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    // In problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Technically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

根據當前環境支援什麼方法則確定呼叫最優的方式。Promise.then、MutationObserver、setImmediate、setTimeout通過之中任意一種方法，進行降級操作。

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

無論是微任務還是巨集任務，都會放到flushCallbacks使用，首先將callbacks裡面的函式複製一份，同時置空callbacks，
再依次執行callbacks裡面的函式

四、總結

1、將回調任務放入callbacks佇列中進行等待
2、根據環境，將執行函式flushCallbacks 放入巨集任務或者微任務中
3、事件迴圈到了微任務或者巨集任務，執行函式依次執行callbacks中的回撥

參考文獻

https://juejin.cn/post/6844904147804749832
https://vue3js.cn
Vue技術內幕