(vue3 proxy) 用了这么久的Vue3你真的了解Proxy了吗 Vue 3 使用 Proxy 实现响应式系统全网首发(图文详解1)

(vue3 proxy) 用了这么久的Vue3你真的了解Proxy了吗

Vue 3使用Proxy来实现其响应式系统，这是它与Vue 2最大的区别之一。Proxy是ES6引入的一个特性，它允许你创建一个对象的代理，从而在基本操作（如属性读取、设置、枚举等）上添加自定义行为。

了解Proxy

在Vue 3响应式系统中，Proxy用于拦截对象的访问和设置操作，这样Vue就可以跟踪数据的变化，并在数据变化时通知视图更新。

基础使用示例：

let rawData = { name: "Vue3" };
let reactiveData = new Proxy(rawData, {
  get(target, property) {
    console.log(`获取${property}的值`);
    return Reflect.get(target, property);
  },
  set(target, property, value) {
    console.log(`设置${property}为${value}`);
    return Reflect.set(target, property, value);
  }
});

reactiveData.name; // 访问属性时，触发get
reactiveData.name = "Vue 3 Proxy"; // 设置属性时，触发set

使用Proxy实现Vue 3响应式

要在Vue 3中利用Proxy实现响应式，需要遵循以下步骤：

创建响应式对象： 使用Proxy来创建对象的代理，并在代理中实现数据变化的捕捉。
依赖收集： 当渲染函数或计算属性等被执行访问代理对象的属性时，需记录这个属性被哪些效果（effect）依赖。
派发更新： 当代理对象的属性被修改时，需要通知所有依赖于这个属性的效果重新执行。

以下是一个简化的示例，展示如何手动实现一个简单的响应式系统：

let activeEffect = null;

function effect(fn) {
  activeEffect = fn;
  fn(); // 执行一次，进行依赖收集
  activeEffect = null;
}

const targetMap = new WeakMap();

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

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

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

这个例子展示了基本的响应式实现框架。reactive函数用于创建一个对象的响应式代理，通过effect函数可以注册一个副作用函数，当代理对象的属性被读取时，这个副作用函数会被自动执行一次用于依赖收集，而当这个属性被修改时，之前收集的这个属性的所有副作用函数会被触发。