Vue3 使用 Proxy 实现响应式

Vue3 使用 Proxy 实现响应式

Proxy 可以监听对象的任何操作，包括新增属性、删除属性、数组索引变化

论据 / 示例

const reactiveObj = new Proxy({}, {
  get(target, key, receiver) {
    console.log(`读取 ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`设置 ${key} = ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
});
 
reactiveObj.name = 'Vue'; // 触发 set，输出：设置 name = Vue
console.log(reactiveObj.name); // 触发 get，输出：读取 name

关联

• 父级：响应式原理(Vue3)
• 相关：Proxy