Vue 的數(shù)據(jù)響應(yīng)式原理是其核心特性之一，它實(shí)現(xiàn)了數(shù)據(jù)變化自動(dòng)驅(qū)動(dòng)視圖更新。Vue 2.x 和 Vue 3.x 的實(shí)現(xiàn)方式不同，下面分別詳解：

Vue 2.x 的響應(yīng)式原理（基于 Object.defineProperty）

核心步驟：

數(shù)據(jù)劫持（Observer）：
-遍歷 data 中的每個(gè)屬性，用 Object.defineProperty 重寫(xiě)其 getter/setter。
-每個(gè)屬性關(guān)聯(lián)一個(gè) Dep 實(shí)例（依賴(lài)收集器）。依賴(lài)收集（Dependency Collection）：
-當(dāng)組件渲染時(shí)，會(huì)訪問(wèn)數(shù)據(jù)屬性，觸發(fā) getter。
-此時(shí) Dep 會(huì)記錄當(dāng)前 Watcher（每個(gè)組件對(duì)應(yīng)一個(gè)渲染 Watcher）。派發(fā)更新（Dispatching Updates）：
-當(dāng)數(shù)據(jù)被修改時(shí)，觸發(fā) setter。
-Dep 通知所有關(guān)聯(lián)的 Watcher 執(zhí)行更新（如重新渲染組件）。數(shù)組的特殊處理：
-重寫(xiě)數(shù)組的 7 個(gè)方法（push/pop/shift/unshift/splice/sort/reverse），在調(diào)用這些方法時(shí)手動(dòng)觸發(fā)更新。
-通過(guò) proto 繼承改寫(xiě)后的數(shù)組方法（或直接覆蓋原型）。

代碼簡(jiǎn)化示例：

class Dep {
  constructor() {
    this.subs = new Set();
  }
  depend() {
    if (currentWatcher) this.subs.add(currentWatcher);
  }
  notify() {
    this.subs.forEach(watcher => watcher.update());
  }
}
function defineReactive(obj, key) {
  const dep = new Dep();
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集依賴(lài)
      return value;
    },
    set(newVal) {
      value = newVal;
      dep.notify(); // 觸發(fā)更新
    }
  });
}

局限性：

• 無(wú)法檢測(cè)新增/刪除屬性 → 需用 Vue.set/Vue.delete。
• 數(shù)組索引/長(zhǎng)度修改無(wú)法監(jiān)聽(tīng) → 需用重寫(xiě)的方法或 Vue.set。
• 遞歸遍歷對(duì)象性能損耗。

Vue 3.x 的響應(yīng)式原理（基于 Proxy）

Vue 3 使用 Proxy 替代 Object.defineProperty，徹底解決 Vue 2 的痛點(diǎn)。

核心步驟：

代理對(duì)象（Reactive）：
-通過(guò) Proxy 包裹目標(biāo)對(duì)象，攔截 所有操作（增/刪/改/查/遍歷等）。
-每個(gè)對(duì)象關(guān)聯(lián)一個(gè) ReactiveEffect 集合。

依賴(lài)收集：
-當(dāng)訪問(wèn)數(shù)據(jù)時(shí)，觸發(fā) get 攔截，收集當(dāng)前活躍的 Effect（副作用函數(shù)）。

觸發(fā)更新：
-當(dāng)修改數(shù)據(jù)時(shí)，觸發(fā) set 或 deleteProperty 攔截，通知所有關(guān)聯(lián)的 Effect 重新執(zhí)行。

代碼簡(jiǎn)化示例：

const targetMap = new WeakMap(); // 存儲(chǔ)所有依賴(lài)
function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) targetMap.set(target, (depsMap = new Map()));
  let dep = depsMap.get(key);
  if (!dep) depsMap.set(key, (dep = new Set()));
  dep.add(activeEffect); // 收集當(dāng)前 Effect
}
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  depsMap.get(key)?.forEach(effect => effect.run()); // 執(zhí)行所有 Effect
}
const proxy = new Proxy(data, {
  get(target, key) {
    track(target, key); // 訪問(wèn)時(shí)收集依賴(lài)
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    Reflect.set(target, key, value);
    trigger(target, key); // 修改時(shí)觸發(fā)更新
    return true;
  }
});

優(yōu)勢(shì)：

• 支持監(jiān)聽(tīng)動(dòng)態(tài)新增/刪除屬性。
• 支持監(jiān)聽(tīng)數(shù)組索引和長(zhǎng)度變化。
• 惰性收集：僅代理訪問(wèn)到的屬性，減少初始化開(kāi)銷(xiāo)。
• 統(tǒng)一處理對(duì)象/數(shù)組，無(wú)需特殊邏輯。

關(guān)鍵概念補(bǔ)充

副作用函數(shù)（Effect）：
-Vue 3 使用 ReactiveEffect 封裝更新邏輯（相當(dāng)于 Vue 2 的 Watcher）。
-組件渲染、計(jì)算屬性、偵聽(tīng)器都是副作用函數(shù)。

響應(yīng)式 API：
-reactive()：創(chuàng)建深層次響應(yīng)式對(duì)象（基于 Proxy）。
-ref()：將基本類(lèi)型包裝為 { value: … } 的響應(yīng)式引用（通過(guò) .value 訪問(wèn)）。
-computed/watch：基于 Effect 系統(tǒng)實(shí)現(xiàn)。

依賴(lài)清理：
-每次執(zhí)行 Effect 前清理舊依賴(lài)，避免無(wú)效更新（如條件分支變化時(shí)）。

總結(jié)對(duì)比

Vue 3 的響應(yīng)式系統(tǒng)獨(dú)立為庫(kù) @vue/reactivity，可脫離框架使用。

到此這篇關(guān)于Vue數(shù)據(jù)響應(yīng)式原理解析的文章就介紹到這了,更多相關(guān)Vue數(shù)據(jù)響應(yīng)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論