Vue你不得不知道的非同步更新機制和nextTick原理

来源:https://www.cnblogs.com/chanwahfung/archive/2020/07/13/13296293.html
-Advertisement-
Play Games

前言 非同步更新是 Vue 核心實現之一，在整體流程中充當著 watcher 更新的調度者這一角色。大部分 watcher 更新都會經過它的處理，在適當時機讓更新有序的執行。而 nextTick 作為非同步更新的核心，也是需要學習的重點。 本文你能學習到： 非同步更新的作用 nextTick原理 非同步更新 ...


前言

非同步更新是 Vue 核心實現之一，在整體流程中充當著 watcher 更新的調度者這一角色。大部分 watcher 更新都會經過它的處理，在適當時機讓更新有序的執行。而 nextTick 作為非同步更新的核心，也是需要學習的重點。

本文你能學習到：

  • 非同步更新的作用
  • nextTick原理
  • 非同步更新流程

JS運行機制

在理解非同步更新前，需要對JS運行機制有些瞭解，如果你已經知道這些知識，可以選擇跳過這部分內容。

JS 執行是單線程的，它是基於事件迴圈的。事件迴圈大致分為以下幾個步驟：

  1. 所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。
  2. 主線程之外，還存在一個"任務隊列"（task queue）。只要非同步任務有了運行結果，就在"任務隊列"之中放置一個事件。
  3. 一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊列"，看看裡面有哪些事件。那些對應的非同步任務，於是結束等待狀態，進入執行棧，開始執行。
  4. 主線程不斷重覆上面的第三步。

“任務隊列”中的任務(task)被分為兩類，分別是巨集任務(macro task)和微任務(micro task)

巨集任務：在一次新的事件迴圈的過程中，遇到巨集任務時，巨集任務將被加入任務隊列，但需要等到下一次事件迴圈才會執行。常見的巨集任務有 setTimeout、setImmediate、requestAnimationFrame

微任務：當前事件迴圈的任務隊列為空時，微任務隊列中的任務就會被依次執行。在執行過程中，如果遇到微任務，微任務被加入到當前事件迴圈的微任務隊列中。簡單來說，只要有微任務就會繼續執行，而不是放到下一個事件迴圈才執行。常見的微任務有 MutationObserver、Promise.then

總的來說，在事件迴圈中，微任務會先於巨集任務執行。而在微任務執行完後會進入瀏覽器更新渲染階段，所以在更新渲染前使用微任務會比巨集任務快一些。

關於事件迴圈和瀏覽器渲染可以看下 晨曦時夢見兮 大佬的文章 《深入解析你不知道的 EventLoop 和瀏覽器渲染、幀動畫、空閑回調（動圖演示）》

為什麼需要非同步更新

既然非同步更新是核心之一，首先要知道它的作用是什麼，解決了什麼問題。

先來看一個很常見的場景：

created(){
    this.id = 10
    this.list = []
    this.info = {}
}

總所周知，Vue 基於數據驅動視圖，數據更改會觸發 setter 函數，通知 watcher 進行更新。如果像上面的情況，是不是代表需要更新3次，而且在實際開發中的更新可不止那麼少。更新過程是需要經過繁雜的操作，例如模板編譯、dom diff，頻繁進行更新的性能當然很差。

Vue 作為一個優秀的框架，當然不會那麼“直男”，來多少就照單全收。Vue 內部實際是將 watcher 加入到一個 queue 數組中，最後再觸發 queue 中所有 watcher 的 run 方法來更新。並且加入 queue 的過程中還會對 watcher 進行去重操作，因為在一個組件中 data 內定義的數據都是存儲同一個 “渲染watcher”，所以以上場景中數據即使更新了3次，最終也只會執行一次更新頁面的邏輯。

為了達到這種效果，Vue 使用非同步更新，等待所有數據同步修改完成後，再去執行更新邏輯。

nextTick 原理

非同步更新內部是最重要的就是 nextTick 方法，它負責將非同步任務加入隊列和執行非同步任務。Vue 也將它暴露出來提供給用戶使用。在數據修改完成後，立即獲取相關DOM還沒那麼快更新，使用 nextTick 便可以解決這一問題。

認識 nextTick

官方文檔對它的描述：

在下次 DOM 更新迴圈結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。

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

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

nextTick 使用方法有回調和Promise兩種，以上是通過構造函數調用的形式，更常見的是在實例調用 this.$nextTick。它們都是同一個方法。

內部實現

在 Vue 源碼 2.5+ 後，nextTick 的實現單獨有一個 JS 文件來維護它，它的源碼並不複雜，代碼實現不過100行，稍微花點時間就能啃下來。源碼位置在 src/core/util/next-tick.js，接下來我們來看一下它的實現，先從入口函數開始：

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 1
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 2
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  // 3
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
  1. cb 即傳入的回調，它被 push 進一個 callbacks 數組，等待調用。
  2. pending 的作用就是一個鎖，防止後續的 nextTick 重覆執行 timerFunc。timerFunc 內部創建會一個微任務或巨集任務，等待所有的 nextTick 同步執行完成後，再去執行 callbacks 內的回調。
  3. 如果沒有傳入回調，用戶可能使用的是 Promise 形式，返回一個 Promise，_resolve 被調用時進入到 then。

繼續往下走看看 timerFunc 的實現：

// Here we have async deferring wrappers using microtasks.
// In 2.5 we used (macro) tasks (in combination with microtasks).
// However, it has subtle problems when state is changed right before repaint
// (e.g. #6813, out-in transitions).
// Also, using (macro) tasks in event handler would cause some weird behaviors
// that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109).
// So we now use microtasks everywhere, again.
// A major drawback of this tradeoff is that there are some scenarios
// where microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690, which have workarounds)
// or even between bubbling of the same event (#6566).
let timerFunc

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
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)
  }
}

上面的代碼並不複雜，主要通過一些相容判斷來創建合適的 timerFunc，最優先肯定是微任務，其次再到巨集任務。優先順序為 promise.then > MutationObserver > setImmediate > setTimeout。（源碼中的英文說明也很重要，它們能幫助我們理解設計的意義）

我們會發現無論哪種情況創建的 timerFunc，最終都會執行一個 flushCallbacks 的函數。

const callbacks = []
let pending = false

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

flushCallbacks 里做的事情 so easy，它負責執行 callbacks 里的回調。

好了，nextTick 的源碼就那麼多，現在已經知道它的實現，下麵再結合非同步更新流程，讓我們對它更充分的理解吧。

非同步更新流程

數據被改變時，觸發 watcher.update

// 源碼位置：src/core/observer/watcher.js
update () {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true
  } else if (this.sync) {
    this.run()
  } else {
    queueWatcher(this) // this 為當前的實例 watcher
  }
}

調用 queueWatcher，將 watcher 加入隊列

// 源碼位置：src/core/observer/scheduler.js
const queue = []
let has = {}
let waiting = false
let flushing = false
let index = 0

export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  // 1
  if (has[id] == null) {
    has[id] = true
    // 2
    if (!flushing) {
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // queue the flush
    // 3
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)
    }
  }
}
  1. 每個 watcher 都有自己的 id，當 has 沒有記錄到對應的 watcher，即第一次進入邏輯，否則是重覆的 watcher, 則不會進入。這一步就是實現 watcher 去重的點。
  2. 將 watcher 加入到隊列中，等待執行
  3. waiting 的作用是防止 nextTick 重覆執行

flushSchedulerQueue 作為回調傳入 nextTick 非同步執行。

function flushSchedulerQueue () {
  currentFlushTimestamp = getNow()
  flushing = true
  let watcher, id

  // Sort queue before flush.
  // This ensures that:
  // 1. Components are updated from parent to child. (because parent is always
  //    created before the child)
  // 2. A component's user watchers are run before its render watcher (because
  //    user watchers are created before the render watcher)
  // 3. If a component is destroyed during a parent component's watcher run,
  //    its watchers can be skipped.
  queue.sort((a, b) => a.id - b.id)

  // do not cache length because more watchers might be pushed
  // as we run existing watchers
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    if (watcher.before) {
      watcher.before()
    }
    id = watcher.id
    has[id] = null
    watcher.run()
  }

  // keep copies of post queues before resetting state
  const activatedQueue = activatedChildren.slice()
  const updatedQueue = queue.slice()

  resetSchedulerState()

  // call component updated and activated hooks
  callActivatedHooks(activatedQueue)
  callUpdatedHooks(updatedQueue)
}

flushSchedulerQueue 內將剛剛加入 queue 的 watcher 逐個 run 更新。resetSchedulerState 重置狀態，等待下一輪的非同步更新。

function resetSchedulerState () {
  index = queue.length = activatedChildren.length = 0
  has = {}
  if (process.env.NODE_ENV !== 'production') {
    circular = {}
  }
  waiting = flushing = false
}

要註意此時 flushSchedulerQueue 還未執行，它只是作為回調傳入而已。因為用戶可能也會調用 nextTick 方法。這種情況下，callbacks 里的內容為 ["flushSchedulerQueue", "用戶的nextTick回調"]，當所有同步任務執行完成，才開始執行 callbacks 裡面的回調。

由此可見，最先執行的是頁面更新的邏輯，其次再到用戶的 nextTick 回調執行。這也是為什麼我們能在 nextTick 中獲取到更新後DOM的原因。

總結

非同步更新機制使用微任務或巨集任務，基於事件迴圈運行，在 Vue 中對性能起著至關重要的作用，它對重覆冗餘的 watcher 進行過濾。而 nextTick 根據不同的環境，使用優先順序最高的非同步任務。這樣做的好處是等待所有的狀態同步更新完畢後，再一次性渲染頁面。用戶創建的 nextTick 運行頁面更新之後，因此能夠獲取更新後的DOM。

往期 Vue 源碼相關文章：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Redis通過主從複製完成數據遷移
    Redis通過主從複製完成數據遷移 進入新的伺服器,執行從庫配置,slaveof 命令配置當前Redis的主機，info命令可以查看Redis的信息。執行完slaveof命令後執行info命令查看master_link_status的值如果為up表示同步完成。這時候該Redis的角色為slave。 ...
  • docker Redis容器通過dump.rdb文件進行數據遷移或恢複數據
    docker Redis容器通過dump.rdb文件進行數據遷移或恢複數據 拉取Redis鏡像 # 拉取最新的Redis鏡像 $docker pull redis 進入舊的Redis容器保存數據 $docker exec -it old_aley_redis redis-cli 127.0.0.1: ...
  • Mysql----左連接、右連接、內連接、全連接的區別
    最近，突然想起來資料庫有好些時間沒用到，所以，想把資料庫有關的知識回顧一下，所以接下來這個月，基本上會以資料庫的帖子來寫為主,首先，很多同學都會有個錯覺，覺得學習資料庫會sql語句的增刪改查就夠了，其實，這僅僅是片面的認知，掌握了這些還遠遠不夠，sql是你作為謀求生計的基本功，不會也得會，但是，要想 ...
  • Android 開發技術周報 Issue#288
    新聞 讓分享菜單變更簡潔：Android 11 Beta 2將應用的多個分享選項合併 Android 11新功能Auto-Connect：無需再為自動連接Wi-Fi煩惱 原生滾動截屏功能將不會出現在 Android 11 最終版本中 谷歌正為用戶和開發者打造全新Android平板體驗 更多細節八月公 ...
  • 01.基本數據類型
    基本數據類型（7種） number 1,2,3...... string '你好', 'hello', "helleo" boolean false/ true null undefined symbol object arr/fuction 標識符 : 所有用戶自定義的名字叫做標識符 1.不能以數 ...
  • 36.數組—引用（stack , heap）
    ------------------------------------------------------------------------------------------------------------------------------------------------------... ...
  • JavaScript連載24-正則表達式
    一、正則表達式 1.基本概念（簡略） 三大作用：匹配，提取，替換 正則表達式的組成：普通字元和元字元 元字元 元字元描述 \d 匹配一個數字字元，等價於[0-9] \D 匹配一個非數字字元，等價於[^0-9] \w 匹配一個包括下劃線在內的任意單詞字元，等價於[A-Za-z0-9] \W 匹配任何非 ...
  • css中的flex佈局
    flex佈局 任何一個容器都可以指定為flex佈局 當父盒子設為flex佈局後，子元素的float、clear、vertical-align屬性將失效 伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局 採用flex的元素，稱為Flex容器（flex container）簡稱”容器“。 它的所 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類