記錄--圖解 Vue 響應式原理

来源:https://www.cnblogs.com/smileZAZ/archive/2022/10/17/16799780.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 最近部門分享，有同學提到了 Vue 響應式原理，大家在討論時，發現一些同學對這一知識理解還不夠深入，不能形成一個閉環，為了幫助大家理解這個問題，我重新過了一下 Vue 源碼，並整理了多張流程圖，便於大家理解。 Vue 初始化 模板渲染 組 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

最近部門分享，有同學提到了 Vue 響應式原理，大家在討論時，發現一些同學對這一知識理解還不夠深入，不能形成一個閉環，為了幫助大家理解這個問題，我重新過了一下 Vue 源碼，並整理了多張流程圖，便於大家理解。

  • Vue 初始化
  • 模板渲染
  • 組件渲染

本文 Vue 源碼版本：2.6.11，為了便於理解，均有所刪減。

本文將從以下兩個方面進行探索：

  • 從 Vue 初始化，到首次渲染生成 DOM 的流程。

  • 從 Vue 數據修改，到頁面更新 DOM 的流程。

Vue 初始化

先從最簡單的一段 Vue 代碼開始：

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
new Vue({
  data() {
    return {
      message: "hello world",
    };
  },
});
</script>

這段代碼很簡單，最終會在頁面上列印一個 hello world，它是如何實現的呢？

我們從源頭：new Vue 的地方開始分析。

// 執行 new Vue 時會依次執行以下方法
// 1. Vue.prototype._init(option)
// 2. initState(vm)
// 3. observe(vm._data)
// 4. new Observer(data)

// 5. 調用 walk 方法，遍歷 data 中的每一個屬性，監聽數據的變化。
function walk(obj) {
  const keys = Object.keys(obj);
  for (let i = 0; i < keys.length; i++) {
    defineReactive(obj, keys[i]);
  }
}

// 6. 執行 defineProperty 監聽數據讀取和設置。
function defineReactive(obj, key, val) {
  // 為每個屬性創建 Dep（依賴搜集的容器，後文會講）
  const dep = new Dep();
  // 綁定 get、set
  Object.defineProperty(obj, key, {
    get() {
      const value = val;
      // 如果有 target 標識，則進行依賴搜集
      if (Dep.target) {
        dep.depend();
      }
      return value;
    },
    set(newVal) {
      val = newVal;
      // 修改數據時，通知頁面重新渲染
      dep.notify();
    },
  });
}
數據描述符綁定完成後，我們就能得到以下的流程圖：

 圖中我們可以看到，Vue 初始化時，進行了數據的 get、set 綁定，並創建了一個 Dep 對象。

對於數據的 get、set 綁定我們並不陌生，但是 Dep 對象什麼呢？

Dep 對象用於依賴收集，它實現了一個發佈訂閱模式，完成了數據 Data 和渲染視圖 Watcher 的訂閱，我們一起來剖析一下。

class Dep {
  // 根據 ts 類型提示，我們可以得出 Dep.target 是一個 Watcher 類型。
  static target: ?Watcher;
  // subs 存放搜集到的 Watcher 對象集合
  subs: Array<Watcher>;
  constructor() {
    this.subs = [];
  }
  addSub(sub: Watcher) {
    // 搜集所有使用到這個 data 的 Watcher 對象。
    this.subs.push(sub);
  }
  depend() {
    if (Dep.target) {
      // 搜集依賴，最終會調用上面的 addSub 方法
      Dep.target.addDep(this);
    }
  }
  notify() {
    const subs = this.subs.slice();
    for (let i = 0, l = subs.length; i < l; i++) {
      // 調用對應的 Watcher，更新視圖
      subs[i].update();
    }
  }
}

根據對 Dep 的源碼分析，我們得到了下麵這張邏輯圖：

 瞭解 Data 和 Dep 之後，我們來繼續揭開 Watcher 的面紗。

class Watcher {
  constructor(vm: Component, expOrFn: string | Function) {
    // 將 vm._render 方法賦值給 getter。
    // 這裡的 expOrFn 其實就是 vm._render，後文會講到。
    this.getter = expOrFn;
    this.value = this.get();
  }
  get() {
    // 給 Dep.target 賦值為當前 Watcher 對象
    Dep.target = this;
    // this.getter 其實就是 vm._render
    // vm._render 用來生成虛擬 dom、執行 dom-diff、更新真實 dom。
    const value = this.getter.call(this.vm, this.vm);
    return value;
  }
  addDep(dep: Dep) {
    // 將當前的 Watcher 添加到 Dep 收集池中
    dep.addSub(this);
  }
  update() {
    // 開啟非同步隊列，批量更新 Watcher
    queueWatcher(this);
  }
  run() {
    // 和初始化一樣，會調用 get 方法，更新視圖
    const value = this.get();
  }
}
源碼中我們看到，Watcher 實現了渲染方法 _render 和 Dep 的關聯， 初始化 Watcher 的時候，打上 Dep.target 標識，然後調用 get 方法進行頁面渲染。加上上文的 Data，目前 Data、Dep、Watcher 三者的關係如下： 我們再拉通串一下整個流程：Vue 通過 defineProperty 完成了 Data 中所有數據的代理，當數據觸發 get 查詢時，會將當前的 Watcher 對象加入到依賴收集池 Dep 中，當數據 Data 變化時，會觸發 set 通知所有使用到這個 Data 的 Watcher 對象去 update 視圖。 目前的整體流程如下：

上圖的流程中 Data 和 Dep 都是 Vue 初始化時創建的，但現在我們並不知道 Wacher 是從哪裡創建的，帶著這個問題，我們接著往下探索。

模板渲染

上文中，我們分析了初始化 Vue 過程中處理數據的部分，接下來，我們分析一下數據渲染的部分。

其實 new Vue 執行到最後，會調用 mount 方法，將 Vue 實例渲染成 dom 。

// new Vue 執行流程。
// 1. Vue.prototype._init(option)
// 2. vm.$mount(vm.$options.el)
// 3. render = compileToFunctions(template) ，編譯 Vue 中的 template 模板，生成 render 方法。
// 4. Vue.prototype.$mount 調用上面的 render 方法掛載 dom。
// 5. mountComponent

// 6. 創建 Watcher 實例
const updateComponent = () => {
  vm._update(vm._render());
};
// 結合上文，我們就能得出，updateComponent 就是傳入 Watcher 內部的 getter 方法。
new Watcher(vm, updateComponent);

// 7. new Watcher 會執行 Watcher.get 方法
// 8. Watcher.get 會執行 this.getter.call(vm, vm) ，也就是執行 updateComponent 方法
// 9. updateComponent 會執行 vm._update(vm._render())

// 10. 調用 vm._render 生成虛擬 dom
Vue.prototype._render = function (): VNode {
  const vm: Component = this;
  const { render } = vm.$options;
  let vnode = render.call(vm._renderProxy, vm.$createElement);
  return vnode;
};
// 11. 調用 vm._update(vnode) 渲染虛擬 dom
Vue.prototype._update = function (vnode: VNode) {
  const vm: Component = this;
  if (!prevVnode) {
    // 初次渲染
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false);
  } else {
    // 更新
    vm.$el = vm.__patch__(prevVnode, vnode);
  }
};
// 12. vm.__patch__ 方法就是做的 dom diff 比較，然後更新 dom，這裡就不展開了。

看完 Vue 模板渲染的過程，我們可以得到如下的流程圖：

到這裡，我們就知道了 Watcher 其實是在 Vue 初始化的階段創建的，屬於生命周期中 beforeMount 的位置創建的，創建 Watcher 時會執行 render 方法，最終將 Vue 代碼渲染成真實的 DOM。

我們再將之前的流程整合一下，就能得到以下的流程：

上圖分析了 Vue 初始化到渲染 DOM 的整個過程，最後我們再分析一下，當數據變化時，Vue 又是怎麼進行更新的？

其實，在上圖也能看出，在 Data 變化時，會調用 Dep.notify 方法，隨即調用 Watcher 內部的 update 方法，此方法會將所有使用到這個 Data 的 Watcher 加入一個隊列，並開啟一個非同步隊列進行更新，最終執行 _render 方法完成頁面更新。

整體的流程如下：

好了，探索到這裡，Vue 的響應式原理，已經被我們分析透徹了，如果你還沒有明白，不妨再細品一下上圖。

組件渲染

本來探索到上面的流程圖就結束了，但好奇的我又想到了一個問題

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

-Advertisement-
Play Games
更多相關文章
  • 從0到1設計通用數據大屏搭建平臺
    基於可視化搭建的方式來實現通用數據大屏搭建的解決方案，通過對平臺能力的開發來講解可視化搭建的核心功能實現，幫助有需要的同學瞭解可視化搭建的整體架構設計流程。 ...
  • 使用BCP + Polybase 實現本地數據遷移到Azure DB
    使用BCP + Polybase 實現本地數據遷移到Azure DB 一、背景 最近因為要做一些實驗的緣故， 需要在Azure DB上準備一些帶數據的資料庫。 AdventureWorks2019 和AdventureWorksDW2019就挺合適的，官網上能提供這兩個資料庫的備份文件。 在我將其成 ...
  • PostgreSQL DBA最常用SQL
    背景 建立視圖, 方便查詢 create schema dba; create view dba.invalid_index as select indisvalid, indexrelid::regclass, indrelid::regclass, pg_get_indexdef(indexre ...
  • Redis 知識總結
    Redis 和 memcache 的區別，Redis 支持的數據類型應用場景 redis 支持的數據結構更豐富(string，hash，list，set，zset)。memcache 只支持 key-value 的存儲； redis 原生支持集群，memcache 沒有原生的集群模式。 ...
  • 請求投放個性化廣告時，如何徵得用戶同意？
    過去，App里各種彈窗和貼片廣告不僅令用戶心煩，廣告主們也頭疼。一方面，廣撒網的廣告成本較高；另一方面，這些廣告不能精準觸達需要的用戶。直到個性化廣告的出現，才解決了這一痛點。 如今媒體廣告主們為了更精準地投放廣告，通常會收集用戶個人數據來判斷他們的特征定位、興趣愛好或近期需求等，然後在App里進行 ...
  • 原生js中offsetTop, offsetLeft與offsetParent的詳細講解
    簡單說下:offsetTop offsetTop: 為只讀屬性。 返回的是一個數字。 它返回當前元素相對於其 offsetParent 元素的頂部內邊距的距離。 它等價於offsetTop==>元素到offsetParent頂部內邊距的距離 offsetTop並不是指距離瀏覽器視窗最左邊的位置。 我 ...
  • JavaScript輸入輸出語句propmt、alert、console
    propmt是一個輸入語句它的返回結果是你輸入的內容，無論輸入什麼內容返回結果的數據類型都是字元串類型。 alert是一個彈框輸出 console是控制台輸出 下麵代碼的意思是輸入一些內容然後保存到content變數裡面 然後alert輸出content變數也就是你從prompt輸入的內容 cons ...
  • 節流VS防抖
    在前端頁面中，有些事件可能會由於用戶不必要的操作而頻繁觸發，這在無形之中就增加了伺服器的IO併發量. 為瞭解決這個問題，我們通常會通過防抖或節流的方式來限制事件函數的執行次數. ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類