10.4 Proxy 的应用场景（如 Vue3 响应式原理）

10.4 Proxy 的应用场景（如 Vue3 响应式原理）

Proxy 是 JavaScript 中强大的元编程工具，广泛应用于各种场景，如数据绑定、验证、日志记录等。Vue3 的响应式系统就是基于 Proxy 实现的。本节将详细介绍 Proxy 的应用场景，并深入解析 Vue3 的响应式原理。

10.4.1 Proxy 的应用场景

1. 数据绑定
通过 Proxy 拦截数据的设置操作，实现视图的自动更新。

2. 数据验证
通过 Proxy 拦截数据的设置操作，确保数据的合法性。

3. 日志记录
通过 Proxy 记录对象的操作日志，便于调试和监控。

4. 缓存
通过 Proxy 实现缓存机制，提高性能。

5. 权限控制
通过 Proxy 拦截对象的访问操作，实现权限控制。

10.4.2 Vue3 的响应式原理

Vue3 的响应式系统基于 Proxy 实现，通过拦截对象的读取和设置操作，自动追踪依赖并触发更新。

1. 响应式对象
Vue3 使用 reactive 函数创建响应式对象：

function reactive(target) {
  return new Proxy(target, {
    get(target, prop, receiver) {
      track(target, prop); // 追踪依赖
      return Reflect.get(target, prop, receiver);
    },
    set(target, prop, value, receiver) {
      const result = Reflect.set(target, prop, value, receiver);
      trigger(target, prop); // 触发更新
      return result;
    },
  });
}

2. 依赖追踪
Vue3 使用 track 函数追踪依赖，记录哪些属性被访问：

const targetMap = new WeakMap();

function track(target, prop) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(prop);
  if (!dep) {
    depsMap.set(prop, (dep = new Set()));
  }
  dep.add(effect); // 假设 effect 是当前的副作用函数
}

3. 触发更新
Vue3 使用 trigger 函数触发更新，执行所有依赖的副作用函数：

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

4. 示例

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

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

state.count++; // 输出 "Count: 1"
state.count++; // 输出 "Count: 2"

10.4.3 示例代码

示例 1：数据绑定

const data = { name: "Alice" };

const handler = {
  set(target, prop, value) {
    target[prop] = value;
    document.getElementById("name").textContent = value;
    return true;
  },
};

const proxy = new Proxy(data, handler);

document.getElementById("input").addEventListener("input", (e) => {
  proxy.name = e.target.value;
});

示例 2：Vue3 响应式原理

function reactive(target) {
  return new Proxy(target, {
    get(target, prop, receiver) {
      track(target, prop);
      return Reflect.get(target, prop, receiver);
    },
    set(target, prop, value, receiver) {
      const result = Reflect.set(target, prop, value, receiver);
      trigger(target, prop);
      return result;
    },
  });
}

const targetMap = new WeakMap();

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

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

let effect;

function watchEffect(fn) {
  effect = fn;
  fn();
}

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

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

state.count++; // 输出 "Count: 1"
state.count++; // 输出 "Count: 2"

10.4.4 总结

• Proxy 的应用场景：数据绑定、数据验证、日志记录、缓存、权限控制等。
• Vue3 响应式原理：基于 Proxy 实现，通过 track 和 trigger 函数追踪依赖并触发更新。
• 示例代码：展示了如何使用 Proxy 实现数据绑定和 Vue3 的响应式系统。

通过掌握 Proxy 的应用场景和 Vue3 的响应式原理，你可以更好地理解现代前端框架的实现机制，并编写更高效、更灵活的应用。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. Proxy 的主要应用场景有哪些？
2. Vue3 的响应式系统是如何基于 Proxy 实现的？
3. 如何通过 Proxy 实现数据绑定和验证？