快捷導(dǎo)航

Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的示例代碼

更新時間：2025年03月04日 08:51:23 作者：奇舞精選

在 Vue 3 中,Proxy 主要用于攔截對象的基本操作,包括屬性讀取（get）、修改（set）、刪除（deleteProperty）等,本文給大家介紹了Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的操作教程,需要的朋友可以參考下

Proxy 的核心機制

在 Vue 3 中，Proxy 主要用于 攔截對象的基本操作，包括 屬性讀?。╣et）、修改（set）、刪除（deleteProperty） 等。這是 Vue 3 取代 Object.defineProperty 的根本原因。

Proxy 允許攔截的操作：

操作	作用
get(target, key, receiver)	讀取屬性時觸發(fā)
set(target, key, value, receiver)	設(shè)置屬性時觸發(fā)
deleteProperty(target, key)	刪除屬性時觸發(fā)
has(target, key)	判斷 key 是否存在（key in obj）
ownKeys(target)	獲取對象的所有鍵（Object.keys(obj)）
apply(target, thisArg, args)	代理函數(shù)調(diào)用
construct(target, args)	代理 new 操作符

Proxy 的核心實現(xiàn)

讓我們通過一個 手寫 Proxy 劫持 的例子，模擬 Vue 3 響應(yīng)式數(shù)據(jù)的基本實現(xiàn)：

const handler = {
  get(target, key) {
    console.log(`讀取屬性：${key}`);
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    console.log(`修改屬性：${key} -> ${value}`);
    return Reflect.set(target, key, value);
  }
};

const data = { message: "Hello Vue 3" };
const proxyData = new Proxy(data, handler);

console.log(proxyData.message); // 讀取屬性：message
proxyData.message = "Updated"; // 修改屬性：message -> Updated

解讀：

? • Reflect.get(target, key)：用于獲取目標(biāo)對象的值，等價于 target[key]。

? • Reflect.set(target, key, value)：用于修改目標(biāo)對象的值，等價于 target[key] = value。

? • Vue 3 就是基于 Proxy 設(shè)計 reactive() 來創(chuàng)建響應(yīng)式數(shù)據(jù)。

Vue 3 如何基于 Proxy 構(gòu)建響應(yīng)式系統(tǒng)

Vue 3 的核心響應(yīng)式 API reactive() 就是對 Proxy 的封裝，具體實現(xiàn)如下：

function reactive(target) {
  if (typeof target !== "object" || target === null) {
    return target;
  }

  return new Proxy(target, {
    get(target, key, receiver) {
      console.log(`訪問屬性：${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`修改屬性：${key} -> ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  });
}

const state = reactive({ count: 0 });

console.log(state.count); // 訪問屬性：count
state.count++; // 修改屬性：count -> 1

Vue 3 reactive() 實現(xiàn)的核心點

? 1. 使用 Proxy 劫持整個對象，而不是每個屬性。

? 2. 支持深層次代理（但 Vue 3 默認(rèn)是惰性代理，訪問時才創(chuàng)建嵌套對象的代理）。

? 3. 攔截數(shù)組和對象的方法（如 push、pop、delete） 。

Vue 3 的依賴收集與副作用處理機制

Vue 3 采用 “響應(yīng)式依賴收集 + 依賴觸發(fā)” 來完成視圖更新，核心組件包括：

? • reactive()：創(chuàng)建響應(yīng)式數(shù)據(jù)（基于 Proxy）。

? • effect()：收集依賴，記錄哪些屬性被訪問。

? • trigger()：數(shù)據(jù)變更時通知所有依賴執(zhí)行。

1. Vue 3 依賴收集的核心實現(xiàn)

let activeEffect = null; // 當(dāng)前正在執(zhí)行的 effect
const targetMap = new WeakMap(); // 存儲依賴

function effect(fn) {
  activeEffect = fn;
  fn(); // 立即執(zhí)行一次，收集依賴
  activeEffect = null;
}

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }
    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }
    deps.add(activeEffect);
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const effects = depsMap.get(key);
  if (effects) {
    effects.forEach(fn => fn()); // 觸發(fā)所有依賴
  }
}

// 結(jié)合 Proxy 創(chuàng)建 Vue 3 響應(yīng)式對象
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key); // 依賴收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 觸發(fā)更新
      return result;
    }
  });
}

2. Vue 3 響應(yīng)式數(shù)據(jù)的完整示例

const state = reactive({ count: 0 });

effect(() => {
  console.log(`count 更新：${state.count}`);
});

state.count++; // 觸發(fā)更新：count 更新：1
state.count = 5; // 觸發(fā)更新：count 更新：5

執(zhí)行流程：

? 1. effect(() => console.log(state.count)) 執(zhí)行時，觸發(fā) get()，收集 state.count 的依賴。

? 2. state.count++ 觸發(fā) set()，調(diào)用 trigger() 通知所有依賴執(zhí)行 effect()。

Vue 3 Proxy 響應(yīng)式系統(tǒng)的優(yōu)化

1. 依賴按需收集

Vue 2 在初始化時遍歷整個對象，而 Vue 3 只有在 訪問屬性時才進(jìn)行代理，減少性能消耗。

2. 自動清理無效依賴

Vue 3 采用 WeakMap + Set 進(jìn)行依賴存儲，避免內(nèi)存泄漏，Vue 2 需要手動管理依賴刪除。

3. 只更新受影響的組件

Vue 3 的 trigger() 機制讓每個組件只更新它所依賴的部分，避免 Vue 2 中全局重新計算的問題。

總結(jié)

Proxy 使 Vue 3 的響應(yīng)式系統(tǒng)更高效，支持新增屬性監(jiān)聽、數(shù)組操作攔截等。依賴追蹤采用 WeakMap + Set 存儲，提高性能，避免 Vue 2 的內(nèi)存泄漏問題。 Vue 3 采用 Lazy Proxy（惰性代理），只有訪問屬性時才進(jìn)行代理，減少初始化開銷。Vue 3 的響應(yīng)式機制通過effect() 進(jìn)行自動依賴收集，讓數(shù)據(jù)更新更智能、更高效。

以上就是Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Proxy響應(yīng)式數(shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: