如何手寫Vue3響應式系統

如何手寫Vue3響應式系統

Vue3 的響應式系統是其核心特性之一，它通過 Proxy 和 Reflect 實現了數據的自動追蹤和更新。本文將帶你一步步手寫一個簡化版的 Vue3 響應式系統，幫助你理解其背后的原理。

1. 響應式系統的基本概念

在 Vue3 中，響應式系統的核心是通過 Proxy 對象來攔截對數據的訪問和修改操作。當數據被訪問時，系統會記錄下依賴關系；當數據被修改時，系統會通知所有依賴該數據的部分進行更新。

2. 實現一個簡單的響應式系統

2.1 創建 reactive 函數

首先，我們需要創建一個 reactive 函數，它可以將一個普通對象轉換為響應式對象。

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key); // 追蹤依賴
      return result;
    },
    set(target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver);
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key); // 觸發更新
      }
      return result;
    },
  });
}

2.2 實現依賴追蹤

為了實現依賴追蹤，我們需要一個全局的 activeEffect 變量來存儲當前正在執行的副作用函數（effect），以及一個 targetMap 來存儲每個對象的依賴關系。

let activeEffect = null;
const targetMap = new WeakMap();

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

2.3 實現觸發更新

當數據發生變化時，我們需要觸發所有依賴該數據的副作用函數。

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (depsMap) {
    const dep = depsMap.get(key);
    if (dep) {
      dep.forEach((effect) => effect());
    }
  }
}

2.4 實現副作用函數

副作用函數是響應式系統的核心，它會在數據變化時自動執行。我們可以通過 effect 函數來創建一個副作用函數。

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

3. 使用示例

現在我們已經實現了一個簡單的響應式系統，下面是一個使用示例：

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

effect(() => {
  console.log(`Count: ${state.count}`);
});

state.count++; // 輸出: Count: 1
state.count++; // 輸出: Count: 2

在這個示例中，state 是一個響應式對象，effect 函數會在 state.count 發生變化時自動執行，并輸出最新的值。

4. 總結

通過以上步驟，我們實現了一個簡化版的 Vue3 響應式系統。雖然這個系統還非?；A，但它已經展示了 Vue3 響應式系統的核心原理。在實際的 Vue3 源碼中，響應式系統還包含了許多優化和擴展，例如 ref、computed 等特性，但它們的核心思想都是基于 Proxy 和依賴追蹤的機制。

希望這篇文章能幫助你更好地理解 Vue3 的響應式系統，并激發你進一步探索 Vue3 源碼的興趣。