圖解 Vue 響應式原理

来源:https://www.cnblogs.com/xw-01/archive/2023/07/23/17575854.html
-Advertisement-
Play Games

- Vue 初始化 - 模板渲染 - 組件渲染 為了便於理解，本文將從以下兩個方面進行探索： - 從 Vue 初始化，到首次渲染生成 DOM 的流程。 - 從 Vue 數據修改，到頁面更新 DOM 的流程。 # Vue 初始化 先從最簡單的一段 Vue 代碼開始： """ {{ message }} ...


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

為了便於理解，本文將從以下兩個方面進行探索：

  • 從 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();
	},
  });
}

"""
數據描述符綁定完成後，我們就能得到以下的流程圖：

image

圖中我們可以看到，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 的源碼分析，我們得到了下麵這張邏輯圖：

image

瞭解 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

三者的關係如下：

image

我們再拉通串一下整個流程：

Vue 通過defineProperty 完成了 Data 中所有數據

的代理，當數據觸發 get 查詢時，會將當前的

Watcher 對象加入到依賴收集池 Dep 中，當數據

Data 變化時，會觸發 set 通知所有使用到這個 Data

的 Watcher 對象去 update 視圖。

目前的整體流程如下：

image

上圖的流程中 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 模板渲染的過程，我們可以得到如下的流程圖：

image

到這裡，我們就知道了 Watcher 其實是在 Vue 初始

化的階段創建的，屬於生命周期中 beforeMount 的

位置創建的，創建 Watcher 時會執行 render 方法，

最終將 Vue 代碼渲染成真實的 DOM。

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

image

上圖分析了 Vue 初始化到渲染 DOM 的整個過程，最後我們再分析一

下，當數據變化時，Vue 又是怎麼進行更新的？

其實，在上圖也能看出，在 Data 變化時，會調用 Dep.notify 方法，隨

即調用 Watcher 內部的 update 方法，此方法會將所有使用到這個 Data

的 Watcher 加入一個隊列，並開啟一個非同步隊列進行更新，最終執行

_render 方法完成頁面更新。

整體的流程如下：

image

好了，探索到這裡，Vue 的響應式原理，已經被我們分析透徹了，如果你

還沒有明白，不妨再細品一下上圖。

組件渲染

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

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

-Advertisement-
Play Games
更多相關文章
  • [爬蟲]2.2.1 使用Selenium庫模擬瀏覽器操作
    ### 歡迎訪問我的GitHub > 這裡分類和彙總了欣宸的全部原創(含配套源碼)：[https://github.com/zq2599/blog_demos](https://github.com/zq2599/blog_demos) ### 本篇概覽 - 本文是《quarkus實戰》系列的第二篇 ...
  • 模擬ArrayList（順序表）的底層實現
    ## 模擬ArrayLIst的底層實現 ```java package com.tedu.api04.list; import java.util.Objects; /** * @author LIGENSEN * Date: 2023/7/20 11:35 */ public class Arra ...
  • Unity UGUI的RectMask2D（2D遮罩）組件的介紹及使用
    # Unity UGUI的RectMask2D（2D遮罩）組件的介紹及使用 ## 1. 什麼是RectMask2D組件？ RectMask2D是Unity UGUI中的一個組件，用於實現2D遮罩效果。它可以限制子對象在指定的矩形區域內顯示，超出區域的部分將被遮罩隱藏。 ## 2. RectMask2 ...
  • Unity UGUI的LayoutElement（佈局元素）組件的介紹及使用
    # Unity UGUI的LayoutElement（佈局元素）組件的介紹及使用 ## 1. 什麼是LayoutElement組件？ LayoutElement是Unity UGUI中的一個佈局元素組件，用於控制UI元素在佈局中的大小和位置。它可以用於自動調整UI元素的大小，以適應不同的屏幕解析度和 ...
  • shell腳本-入侵檢測與告警
    # shell腳本-入侵檢測與告警 ## 原理 利用inotifywait命令對一些重要的目錄作一個實施監控，例如:當/root 、/usr/bin 等目錄發生改變的，利用inotifywait看可以對其作一個監控作用。 ## inotifywait ### 介紹 inotifywait 是一個 L ...
  • STM32F103C8T6串口通信
    首先來看一下需要操作的函數，以及配置的步驟： 圖1 圖2 Code: usart.c #include "usart.h"void ustart_Init(void ){ GPIO_InitTypeDef GPIO_Init_Ustar ; // 定義輸出埠TX的結構體對象 USART_InitT ...
  • Hive安裝與啟動
    ## 一、mysql安裝 在配置Hive之前一般都需要安裝和配置MySQL，因為Hive為了能操作HDFS上的數據集，那麼他需要知道數據的切分格式，如行列分隔符，存儲類型，是否壓縮，數據的存儲地址等信息。 為了方便以後操作所以他需要將這些信息通過一張表存儲起來，然後將這張表（元數據）存儲到mysql ...
  • 數組去重方法總結（JavaScript 記錄）
    【JavaScript寫法】數組去重 在進行項目開發的時候，有時候需要把一些前端的數組進行去重處理，得到一個去重後的數據，然後再進行相關的操作，這也是在前端面試中經常出現的問題 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類