Vue `reactive`与`readonly`的实现差异：ProxyHandler的定制与权限控制机制

好的，没问题。

Vue reactive 与 readonly 的实现差异：ProxyHandler 的定制与权限控制机制

大家好，今天我们深入探讨 Vue 响应式系统中 reactive 和 readonly 的实现差异，重点剖析它们在 ProxyHandler 定制和权限控制机制上的不同。理解这些差异对于我们更好地理解 Vue 的响应式原理，以及在实际开发中做出更明智的选择至关重要。

1. 响应式系统的基石：Proxy

Vue 3 的响应式系统基于 JavaScript 的 Proxy 对象。Proxy 允许我们拦截对象的基本操作，例如属性读取（get）、属性设置（set）、属性删除（delete）等，并在这些操作发生时执行自定义的行为。

Proxy 的使用方式如下：

const target = {
  name: 'initialName',
  age: 30
};

const handler = {
  get(target, property, receiver) {
    console.log(`Getting property: ${property}`);
    return Reflect.get(target, property, receiver);
  },
  set(target, property, value, receiver) {
    console.log(`Setting property: ${property} to ${value}`);
    return Reflect.set(target, property, value, receiver);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：Getting property: name  initialName
proxy.age = 31; // 输出：Setting property: age to 31

在这个例子中，我们创建了一个 Proxy 对象 proxy，它拦截了对 target 对象的属性读取和设置操作。handler 对象定义了拦截这些操作的具体行为。Reflect.get 和 Reflect.set 用于执行默认的读取和设置操作，并确保正确的 this 上下文。

2. reactive：构建可变的响应式对象

reactive 函数用于将一个普通 JavaScript 对象转换为响应式对象。当响应式对象的属性被读取或修改时，Vue 会自动追踪这些依赖关系，并在数据发生变化时更新相关的视图。

reactive 的核心在于它创建的 Proxy 实例所使用的 ProxyHandler。这个 ProxyHandler 负责拦截对象的各种操作，并触发相应的依赖追踪和更新机制。

以下是 reactive 的简化实现（省略了类型检查、缓存优化等细节）：

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target; // 非对象或 null 直接返回
  }

  const handler = {
    get(target, property, receiver) {
      // 依赖追踪：记录当前 effect
      track(target, property);
      return Reflect.get(target, property, receiver);
    },
    set(target, property, value, receiver) {
      const oldValue = target[property];
      const result = Reflect.set(target, property, value, receiver);

      if (result && oldValue !== value) {
        // 触发更新：通知所有依赖于该属性的 effect
        trigger(target, property);
      }
      return result;
    },
    deleteProperty(target, property) {
      const result = Reflect.deleteProperty(target, property);
      if (result) {
        trigger(target, property);
      }
      return result;
    }
  };

  return new Proxy(target, handler);
}

// 简化的依赖追踪和触发函数 (仅用于演示目的)
const targetMap = new WeakMap();
let activeEffect = null;

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

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

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

// 示例
const data = reactive({ count: 0 });

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

data.count++; // 输出: Count is: 1

在这个例子中，reactive 函数创建了一个 Proxy 对象，其 handler 定义了 get、set 和 deleteProperty 三个拦截器。

• get 拦截器: 在读取属性时，get 拦截器调用 track(target, property) 函数，用于追踪当前正在执行的 effect 函数对该属性的依赖。
• set 拦截器: 在设置属性时，set 拦截器首先执行默认的设置操作，然后比较新值和旧值。如果值发生了变化，set 拦截器调用 trigger(target, property) 函数，用于触发所有依赖于该属性的 effect 函数重新执行，从而更新视图。
• deleteProperty 拦截器: 在删除属性时，deleteProperty 拦截器首先执行默认的删除操作，然后调用 trigger(target, property) 函数，用于触发所有依赖于该属性的 effect 函数重新执行。

3. readonly：创建只读的响应式对象

readonly 函数用于将一个普通 JavaScript 对象转换为只读的响应式对象。与 reactive 不同，readonly 对象的属性不能被修改或删除。任何尝试修改或删除 readonly 对象的属性都会导致一个 TypeError 异常。

readonly 的实现也基于 Proxy，但其 ProxyHandler 具有不同的行为。

以下是 readonly 的简化实现（省略了类型检查、缓存优化等细节）：

function readonly(target) {
  if (typeof target !== 'object' || target === null) {
    return target; // 非对象或 null 直接返回
  }

  const handler = {
    get(target, property, receiver) {
      // 依赖追踪：记录当前 effect
      track(target, property);
      return Reflect.get(target, property, receiver);
    },
    set(target, property, value, receiver) {
      console.warn(`Set operation on key "${String(property)}" failed: target is readonly.`, target);
      return true; // 返回 true 阻止设置操作，但不抛出错误，而是打印警告
    },
    deleteProperty(target, property) {
      console.warn(`Delete operation on key "${String(property)}" failed: target is readonly.`, target);
      return true; // 返回 true 阻止删除操作，但不抛出错误，而是打印警告
    }
  };

  return new Proxy(target, handler);
}

// 示例
const data = readonly({ count: 0 });

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

// data.count++; // 会在控制台打印警告，但不会报错

在这个例子中，readonly 函数创建了一个 Proxy 对象，其 handler 定义了 get、set 和 deleteProperty 三个拦截器。

• get 拦截器: 与 reactive 相同，get 拦截器调用 track(target, property) 函数，用于追踪当前正在执行的 effect 函数对该属性的依赖。即使是只读对象，也需要进行依赖追踪，因为只读对象的值仍然可能依赖于其他响应式对象的变化。
• set 拦截器: set 拦截器会阻止对属性的设置操作，并打印一个警告信息到控制台。它返回 true 以指示设置操作被成功处理，从而避免抛出 TypeError 异常。Vue 3 为了更好的用户体验，选择了打印警告而不是直接抛出错误。
• deleteProperty 拦截器: deleteProperty 拦截器会阻止对属性的删除操作，并打印一个警告信息到控制台。它返回 true 以指示删除操作被成功处理，从而避免抛出 TypeError 异常。

4. reactive vs readonly：ProxyHandler 的差异对比

特性	reactive	readonly
可变性	可变	只读
属性设置	允许设置，并触发更新	阻止设置，打印警告
属性删除	允许删除，并触发更新	阻止删除，打印警告
依赖追踪	支持	支持
ProxyHandler	get、set、deleteProperty 均有实现	get 正常实现，set、deleteProperty 阻止操作
适用场景	需要修改数据的场景，例如组件的 data	不需要修改数据的场景，例如 props、计算属性

5. 权限控制机制：set 和 deleteProperty 拦截器的作用

readonly 的核心权限控制机制体现在其 ProxyHandler 的 set 和 deleteProperty 拦截器上。这两个拦截器通过以下方式阻止对只读对象的修改：

• 阻止默认操作: set 和 deleteProperty 拦截器不会调用 Reflect.set 和 Reflect.deleteProperty，从而阻止了对底层对象的实际修改。
• 提供反馈: set 和 deleteProperty 拦截器会打印警告信息到控制台，告知开发者尝试修改只读对象的行为是不允许的。
• 避免错误: 返回 true 阻止设置和删除操作，但不抛出错误，而是打印警告。

6. 深度 reactive 和深度 readonly

reactive 和 readonly 默认是深度响应式的。这意味着如果对象包含嵌套的对象或数组，那么嵌套的对象或数组也会被转换为响应式或只读对象。

以下是深度 reactive 和深度 readonly 的简化实现（省略了循环引用检测等细节）：

function isObject(val) {
  return typeof val === 'object' && val !== null;
}

function reactive(target) {
  if (!isObject(target)) {
    return target;
  }

  if (isReactive(target)) {
    return target;
  }

  const existingProxy = reactiveMap.get(target);
  if (existingProxy) {
    return existingProxy;
  }

  const handler = {
    get(target, property, receiver) {
      track(target, property);
      const res = Reflect.get(target, property, receiver);
      return isObject(res) ? reactive(res) : res; // 深度递归
    },
    set(target, property, value, receiver) {
      const oldValue = target[property];
      const result = Reflect.set(target, property, value, receiver);

      if (result && oldValue !== value) {
        trigger(target, property);
      }
      return result;
    },
    deleteProperty(target, property) {
      const result = Reflect.deleteProperty(target, property);
      if (result) {
        trigger(target, property);
      }
      return result;
    }
  };

  const proxy = new Proxy(target, handler);
  reactiveMap.set(target, proxy);
  return proxy;
}

function readonly(target) {
  if (!isObject(target)) {
    return target;
  }

  if (isReadonly(target)) {
    return target;
  }

  const existingProxy = readonlyMap.get(target);
  if (existingProxy) {
    return existingProxy;
  }

  const handler = {
    get(target, property, receiver) {
      track(target, property);
      const res = Reflect.get(target, property, receiver);
      return isObject(res) ? readonly(res) : res; // 深度递归
    },
    set(target, property, value, receiver) {
      console.warn(`Set operation on key "${String(property)}" failed: target is readonly.`, target);
      return true;
    },
    deleteProperty(target, property) {
      console.warn(`Delete operation on key "${String(property)}" failed: target is readonly.`, target);
      return true;
    }
  };

  const proxy = new Proxy(target, handler);
  readonlyMap.set(target, proxy);
  return proxy;
}

const reactiveMap = new WeakMap();
const readonlyMap = new WeakMap();

function isReactive(value) {
  return !!value && !!value['__v_isReactive'];
}

function isReadonly(value) {
  return !!value && !!value['__v_isReadonly'];
}

// 示例
const data = reactive({
  nested: {
    count: 0
  }
});

effect(() => {
  console.log(`Nested count is: ${data.nested.count}`);
});

data.nested.count++; // 输出: Nested count is: 1

const readonlyData = readonly({
  nested: {
    count: 0
  }
});

// readonlyData.nested.count++; // 会在控制台打印警告

在这个例子中，reactive 和 readonly 函数在 get 拦截器中递归地调用自身，以将嵌套的对象也转换为响应式或只读对象。

7. 总结

reactive 和 readonly 都是 Vue 响应式系统的重要组成部分。它们都基于 Proxy 对象，但通过定制 ProxyHandler 来实现不同的行为。reactive 创建可变的响应式对象，允许属性的修改和删除，并触发相应的更新。readonly 创建只读的响应式对象，阻止属性的修改和删除，并打印警告信息。理解它们的实现差异有助于我们更好地利用 Vue 的响应式系统，并编写更健壮和可维护的代码。

最后几句：ProxyHandler定制，权限控制，深度响应

reactive 与 readonly 的关键差异在于它们各自的 ProxyHandler 实现，readonly 通过 set 和 deleteProperty 拦截器实现权限控制，阻止修改操作，两者都支持深度响应式，保证嵌套对象的响应性。

更多IT精英技术系列讲座，到智猿学院