Vue數(shù)據(jù)驅(qū)動試圖的實現(xiàn)方法及原理

更新時間：2024年10月23日 09:40:04 作者：小黑豬hhh

當Vue實例中的數(shù)據(jù)（data）發(fā)生變化時,與之相關(guān)聯(lián)的視圖（template）會自動更新,反映出最新的數(shù)據(jù)狀態(tài), Vue的數(shù)據(jù)驅(qū)動視圖是通過其響應式系統(tǒng)實現(xiàn)的,以下是Vue數(shù)據(jù)驅(qū)動視圖實現(xiàn)的核心原理,需要的朋友可以參考下

Vue的數(shù)據(jù)驅(qū)動視圖簡單理解：當Vue實例中的數(shù)據(jù)（data）發(fā)生變化時，與之相關(guān)聯(lián)的視圖（template）會自動更新，反映出最新的數(shù)據(jù)狀態(tài)。這種數(shù)據(jù)與視圖的自動同步，就是Vue數(shù)據(jù)驅(qū)動視圖的核心概念。

Vue的數(shù)據(jù)驅(qū)動視圖是通過其響應式系統(tǒng)實現(xiàn)的。以下是Vue數(shù)據(jù)驅(qū)動視圖實現(xiàn)的核心原理：

響應式系統(tǒng)

Vue的響應式系統(tǒng)基于Object.defineProperty，Vue 3中則使用了Proxy，這使得Vue能夠偵測到數(shù)據(jù)的變化，并自動更新到視圖中。

[原始數(shù)據(jù)]
data: {
  message: "Hello Vue!"
}

[響應式數(shù)據(jù)]
data: {
  message: {
    get() { ... },
    set(newValue) { ... }
  }
}

數(shù)據(jù)劫持（Data Hijacking）
Object.defineProperty（Vue 2）: Vue 2通過Object.defineProperty來劫持（或觀察）每個組件的data對象中的屬性。對于每個屬性，Vue都定義了getter和setter，以便在屬性被訪問或修改時執(zhí)行特定的邏輯。

function defineReactive(data, key, value) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      return value;
    },
    set: function(newVal) {
      if (value === newVal) return;
      value = newVal;
      // 通知視圖更新
    }
  });
}

Proxy（Vue 3）: Vue 3使用Proxy對象重寫了一套響應式系統(tǒng)。Proxy可以攔截對象的任意操作，不僅僅是屬性訪問，是一個更強大和靈活的方式來實現(xiàn)響應式。

function reactive(data) {
  return new Proxy(data, {
    get(target, key) {
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      // 通知視圖更新
      return true;
    }
  });
}

依賴收集
當組件進行渲染時，會訪問模板中用到的data屬性，這個訪問過程會觸發(fā)屬性的getter。getter會執(zhí)行一個“依賴收集”的過程，將當前的屬性與視圖部分建立起聯(lián)系。

[組件渲染]
<template>
  <div>{{ message }}</div>
</template>

[依賴收集]
data.message => 視圖更新函數(shù)

派發(fā)更新
當data中的屬性被修改時，會觸發(fā)setter。setter會通知之前在getter中收集到的依賴（即視圖部分），告知它們數(shù)據(jù)發(fā)生了變化。然后，視圖會根據(jù)新的數(shù)據(jù)重新渲染。

[數(shù)據(jù)變化]
data.message = "Hello World!";

[派發(fā)更新]
setter觸發(fā) =>
通知依賴 =>
執(zhí)行視圖更新函數(shù)

虛擬DOM（Virtual DOM）

Vue使用虛擬DOM來提高性能。虛擬DOM是一個輕量級的JavaScript對象，它表示真實DOM的內(nèi)存表示。

diff算法當數(shù)據(jù)變化時，Vue會生成一個新的虛擬DOM樹，并與舊的樹進行比較（diff）。Vue的diff算法高效地比較兩棵樹，找出實際需要變更的最小部分。
更新真實DOM一旦diff過程完成，并且找出了變化，Vue會高效地批量更新真實DOM，只對變化的部分進行操作。

[虛擬DOM]
Virtual DOM Tree (JavaScript對象)

[Diff算法]
舊Virtual DOM Tree
     |
     | diff
     V
新Virtual DOM Tree
     |
     | 找出差異
     V
[更新真實DOM]

組件化

Vue通過組件化的方式來構(gòu)建界面。每個組件都有自己的狀態(tài)（data）、視圖（template）和行為（methods等）。組件的狀態(tài)變化會觸發(fā)視圖的更新，而且組件之間的狀態(tài)是獨立的。

[組件結(jié)構(gòu)]
<parent-component>
  <child-component :prop="parentData"></child-component>
</parent-component>

[數(shù)據(jù)流]
parentData (parent) => prop (child)