vue 官網(wǎng)中是這樣描述 nextTick 的

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，可以獲取更新后的 DOM。

在學(xué)習(xí) nextTick 是如何實(shí)現(xiàn)之前，我們要先了解下 JavaScript 的執(zhí)行機(jī)制

JavaScript 執(zhí)行機(jī)制

瀏覽器是多線程的，例如GUI渲染線程、JS引擎線程、事件監(jiān)聽線程等。。。

javascript 執(zhí)行機(jī)制就是借用瀏覽器的多線程機(jī)制，再基于 Event Loop 事件循環(huán)機(jī)制實(shí)現(xiàn)的。其實(shí)現(xiàn)了單線程異步效果

Event Loop 步驟大致如下：

瀏覽器加載頁面時(shí)，除了開辟堆棧內(nèi)存外，還會(huì)創(chuàng)建兩個(gè)隊(duì)列 Web API：任務(wù)監(jiān)聽隊(duì)列，監(jiān)測異步任務(wù)是否可以執(zhí)行 Task Queue：任務(wù)隊(duì)列，分為異步宏任務(wù)隊(duì)列和異步微任務(wù)隊(duì)列 當(dāng)主線程自上而下執(zhí)行代碼過程中，如果遇到異步代碼，則把異步任務(wù)放到 Web API 中去監(jiān)聽 瀏覽器會(huì)開辟新的線程去監(jiān)聽是否可以執(zhí)行 不會(huì)阻礙主線程的渲染，它會(huì)繼續(xù)向下執(zhí)行同步代碼 當(dāng)異步任務(wù)被監(jiān)測為可以執(zhí)行了（有了運(yùn)行結(jié)果），也不會(huì)立即去執(zhí)行，而是在 task queue 中放置一個(gè)事件，排隊(duì)等待執(zhí)行 根據(jù)微任務(wù)還是宏任務(wù)，放在不同的隊(duì)列中 誰先進(jìn)來排隊(duì)的，誰在各自隊(duì)伍的最前面 執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，主線程空閑下來，此時(shí)會(huì)去 task queue 中把正在排隊(duì)的事件，按照順序取出來，進(jìn)入主線程執(zhí)行 微任務(wù)優(yōu)先級(jí)比較高。當(dāng)執(zhí)行棧為空時(shí)，先去執(zhí)行微任務(wù)隊(duì)列中的事件，直到微任務(wù)隊(duì)列為空，才會(huì)去執(zhí)行宏任務(wù)隊(duì)列中的事件 上述過程會(huì)不斷重復(fù)，也就是常說的事件循環(huán)（Event Loop）

task 又分為宏任務(wù)（macro task）和微任務(wù)（micro task）兩大類，在瀏覽器環(huán)境中

常見的 macro task 有 script（整體代碼）、setTimeout/setInterval/setImmediate、XMLHttpRequest/fetch，DOM事件（如鼠標(biāo)點(diǎn)擊、滾動(dòng)頁面、放大縮小等），渲染事件（解析 DOM、計(jì)算布局、繪制） 常見的 micro task 有 Promise.then/catch/finally、async/await、MutationObserver

需要注意的是?。。∪绻幚砦⑷蝿?wù)的過程中有新的微任務(wù)添加進(jìn)來了，添加的速度一直比執(zhí)行快，則永遠(yuǎn)執(zhí)行微任務(wù)

下面的代碼永遠(yuǎn)不會(huì)打印宏任務(wù)輸出

function macroFn(){
   setTimeout(() => {
     console.log('>>>>MA')
   },0)
}
function microFn(){
    Promise.resolve().then(() => {
        console.log('mi')
        microFn()
    })
}
macroFn()
microFn()

nextTick實(shí)現(xiàn)原理

vue2.7 源碼中，有一個(gè)單獨(dú)的文件src/core/util/next-tick.js去維護(hù) nextTick，有興趣的同學(xué)可以自行去觀看

vue2.7 源碼中，nextTick并沒有直接使用某個(gè) API ，而是采用了優(yōu)雅降級(jí)的方案去實(shí)現(xiàn)異步更新

在內(nèi)部會(huì)嘗試使用原生的Promise.then (IE不支持)、MutationObserver 和 setImmediate (高版本IE專享)，如果執(zhí)行環(huán)境還不支持的話，則會(huì)采用 setTimeout(fn, 0)

需要注意的是，我們維護(hù)了一個(gè) callbacks，用于存儲(chǔ) nextTick 回調(diào)

這樣就保證了在同一個(gè) tick 內(nèi)多次調(diào)用 nextTick，只需創(chuàng)建一個(gè)異步任務(wù)，就可以依次執(zhí)行 callbacks 中的所有 nextTick 回調(diào)。而不是去開啟多個(gè)異步任務(wù)去處理。

let callbacks = [] // 存儲(chǔ) nextTick 回調(diào)
let waiting = false // 防抖

// 按照順序依次執(zhí)行 callbacks 中的方法
function flushCallbacks() {
  let cbs = callbacks.slice(0)
  waiting = false
  callbacks = []
  cbs.forEach(cb => cb()) 
}


let timerFunc;
if (Promise) {
    timerFunc = () => {
        Promise.resolve().then(flushCallbacks)
    }
}else if(MutationObserver){
    let observer = new MutationObserver(flushCallbacks); // 這里傳入的回調(diào)是異步執(zhí)行的
    let textNode = document.createTextNode(1);
    observer.observe(textNode,{
        characterData:true
    });
    timerFunc = () => {
        textNode.textContent = 2;
    }
}else if(setImmediate){
    timerFunc = () => {
       setImmediate(flushCallbacks);
    }
}else{
    timerFunc = () => {
        setTimeout(flushCallbacks);
     }
}

export function nextTick(cb) {
  callbacks.push(cb) // 維護(hù) nextTick 中的 cakllback 方法
  
  if (!waiting) {
    timerFunc()
    waiting = true
  }
}

異步更新

vue 內(nèi)部的異步更新渲染也使用了 nextTick

在 Watcher 類的 update 更新方法中，我們調(diào)用了 queueWatcher 異步隊(duì)列更新方法，該方法在 vue2.7源碼中的 src/core/util/scheduler.js 文件中維護(hù)

import { queueWatcher } from './scheduler'

class Watcher {
	...
  // 重新渲染
  update() {
    console.log('watcher-update')
    queueWatcher(this) // watcher 異步更新
  }
}

src/core/util/scheduler.js

import { nextTick } from '../util/next-tick'

/**
 * @name QueueWatcher，內(nèi)部 watcher 異步更新
 * @decs 把當(dāng)前的 watcher 暫存起來，在一個(gè)tick周期內(nèi)，不管我們的 update 執(zhí)行多少次，只會(huì)執(zhí)行一輪刷新操作
 */

let queue = []
let has = {}
let pending = false // 防抖

function flushSchedulerQueue() {
  let flushQueue = queue.slice(0)
  queue = []
  has = {}
  pending = false
  flushQueue.forEach(q => q.run()) // 在刷新的過程中可能還有新的 watcher，重新放到 queue 中
}

// 在一個(gè)tick周期內(nèi)，不管我們的 update 執(zhí)行多少次，只會(huì)執(zhí)行一輪刷新操作
export function queueWatcher(watcher) {
  const id = watcher.id
  if (!has[id]) {
    queue.push(watcher)
    has[id] = true
    if (!pending) {
      nextTick(flushSchedulerQueue)
      pending = true
    }
  }
}

常見問題

1. nexTick 是異步還是同步？

這個(gè)不能一概而論，nextTick 內(nèi)部既有同步代碼又有異步代碼。

例如 維護(hù) callbacks 隊(duì)列是同步任務(wù)；執(zhí)行隊(duì)列中的方法是異步任務(wù)

2. nextTick 回調(diào)的執(zhí)行是微任務(wù)還是宏任務(wù)？

針對 vue2.7 來說，nextTick并沒有直接使用某個(gè) API ，而是采用了優(yōu)雅降級(jí)的方案去實(shí)現(xiàn)異步更新。
在內(nèi)部會(huì)嘗試使用原生的Promise.then (微任務(wù))、MutationObserver (微任務(wù)) 和 setImmediate (宏任務(wù))，如果執(zhí)行環(huán)境還不支持的話，則會(huì)采用 setTimeout (宏任務(wù))

可以理解為 99% 的場景下都是微任務(wù)，只有在不支持 Promise 和 MutationObserver API的瀏覽器中，才會(huì)是宏任務(wù)，例如 IE9 、IE10

3. 為什么要封裝 nextTick？而不是使用某個(gè)具體的 API？

優(yōu)雅降級(jí)。盡量使用微任務(wù)，盡可能縮短渲染周期

保證統(tǒng)一性。nextTick 可以暴露給用戶，保證用戶在修改數(shù)據(jù)之后立即使用這個(gè)方法，可以獲取更新后的 DOM

this.name = 'libc'

this.$nextTick(()=>{
  console.log(document.querySelector('.user').innerHTML)
});

總結(jié)：

Vue2的異步更新機(jī)制是Vue的核心之一，通過事件循環(huán)機(jī)制實(shí)現(xiàn)了高效的渲染和性能優(yōu)化。nextTick方法則提供了更為靈活的DOM操作方式，可以在DOM更新后執(zhí)行回調(diào)函數(shù)。在使用Vue2進(jìn)行開發(fā)時(shí)，理解和掌握異步更新機(jī)制和nextTick方法是非常必要的，可以幫助我們更好地優(yōu)化性能和提高渲染效率。

到此這篇關(guān)于Vue2異步更新及nextTick原理詳解的文章就介紹到這了,更多相關(guān)Vue2異步更新及nextTick原理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論