快捷導(dǎo)航

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

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

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

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

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

響應(yīng)式系統(tǒng)

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

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

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

數(shù)據(jù)劫持（Data Hijacking）
Object.defineProperty（Vue 2）: Vue 2通過(guò)Object.defineProperty來(lái)劫持（或觀察）每個(gè)組件的data對(duì)象中的屬性。對(duì)于每個(gè)屬性，Vue都定義了getter和setter，以便在屬性被訪問(wèn)或修改時(shí)執(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對(duì)象重寫(xiě)了一套響應(yīng)式系統(tǒng)。Proxy可以攔截對(duì)象的任意操作，不僅僅是屬性訪問(wèn)，是一個(gè)更強(qiáng)大和靈活的方式來(lái)實(shí)現(xiàn)響應(yīng)式。

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

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

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

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

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

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

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

虛擬DOM（Virtual DOM）

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

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

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

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

組件化

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

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

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