Vue3.0的响应式原理

Vue3.0的响应式

1.通过Proxy(代理): 拦截对象中任意属性的变化,包括:属性值的读写,属性的添加,属性的删除等。

2.通过Reflect(反射): 对被代理对象的属性进行操作

 代码:

   let person = {
      //    原数据
      name: "张三",
      age: 18,
    };
 
    const p = new Proxy(person, {
      get(target, propName) {
        return Reflect.get(target, propName);
      },
      set(target, propName, value) {
        return Reflect.set(target, propName, value);
      },
      deleteProperty(target, propName) {
        return Reflect(target, propName);
      },
    });