Vue.js 使用 Proxy 实现响应式的数据监听-Vue.js-PHP中文网

vue 3 使用 proxy 替代 object.defineproperty 实现响应式，解决了 vue 2 中无法监听新增/删除属性、数组索引赋值及 length 修改等问题，并通过 get/set 拦截实现依赖收集与触发更新，同时扩展支持 in、deleteproperty 等操作及 map/set 等集合类型。

vue.js 使用 proxy 实现响应式的数据监听

Vue 3 使用 Proxy 替代 Vue 2 的 Object.defineProperty 实现响应式系统，这是响应式机制的一次根本性升级。它解决了旧方案中无法监听对象新增/删除属性、数组索引赋值、数组长度修改等限制，让响应式更自然、更完整。

Proxy 如何拦截数据访问与修改

Proxy 通过包装原始对象，创建一个代理对象，在读取（get）和设置（set）时插入逻辑，从而触发依赖收集和更新通知。

get 拦截：在访问属性时，自动将当前运行的副作用函数（如组件渲染函数）作为依赖，记录到该属性的依赖集合中（即“依赖收集”）
set 拦截：在修改属性值时，触发对应依赖集合中的所有函数重新执行（即“触发更新”）
对 in 操作符、deleteProperty、has、ownKeys 等也提供拦截能力，支持 for...in、Object.keys()、Reflect.deleteProperty 等场景的响应式

为什么 Proxy 能监听数组变化

Vue 2 中用 Object.defineProperty 无法劫持数组下标（如 arr[0] = xxx）或直接修改 length，只能重写数组原型方法（如 push、pop）。Proxy 则可直接拦截：

Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互，使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载

通过 set 拦截任意索引赋值（arr[1] = 100）
通过 set 拦截 length 修改（arr.length = 0）
通过 get 和 ownKeys 拦截 arr.length 读取、for...of、Array.from() 等行为

Proxy 的局限与 Vue 的补充策略

Proxy 本身不能监听普通对象以外的类型（如 Map、Set、Date、RegExp），也不能自动深度代理嵌套对象——Vue 3 通过递归 reactive 和特殊处理来弥补：

对 Map/Set 等集合类型，Vue 提供了独立的 reactive 适配逻辑，劫持其原型方法并重写 get/set 行为
对 null、undefined、原始值（string/number/boolean）不代理，直接返回原值；仅对象、数组、Map、Set 等引用类型被转为响应式
使用 ref 包裹原始值，内部通过 value 属性访问，再用 Proxy 或 Object.defineProperty（针对低版本兼容）实现响应式

手动使用 Proxy 实现简易响应式（示意）

以下是一个极简版模拟，帮助理解核心逻辑：

const handlers = {
  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); // 触发更新
    return result;
  }
};

function reactive(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  return new Proxy(obj, handlers);
}

实际 Vue 源码中还包含依赖管理（effect、track、trigger）、嵌套代理、只读控制（readonly）、浅响应（shallowReactive）等完整设计。