快捷導(dǎo)航

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

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

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

Proxy 的核心機(jī)制

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

Proxy 允許攔截的操作：

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

Proxy 的核心實(shí)現(xiàn)

讓我們通過(guò)一個(gè) 手寫 Proxy 劫持 的例子，模擬 Vue 3 響應(yīng)式數(shù)據(jù)的基本實(shí)現(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)對(duì)象的值，等價(jià)于 target[key]。

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

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

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

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

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

  return new Proxy(target, {
    get(target, key, receiver) {
      console.log(`訪問(wèn)屬性：${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); // 訪問(wèn)屬性：count
state.count++; // 修改屬性：count -> 1

Vue 3 reactive() 實(shí)現(xiàn)的核心點(diǎn)

? 1. 使用 Proxy 劫持整個(gè)對(duì)象，而不是每個(gè)屬性。

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

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

Vue 3 的依賴收集與副作用處理機(jī)制

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

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

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

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

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

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

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)式對(duì)象
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í)行時(shí)，觸發(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 在初始化時(shí)遍歷整個(gè)對(duì)象，而 Vue 3 只有在 訪問(wèn)屬性時(shí)才進(jìn)行代理，減少性能消耗。

2. 自動(dòng)清理無(wú)效依賴

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

3. 只更新受影響的組件

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

總結(jié)

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

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

您可能感興趣的文章: