vue2和vue3的响应式

vue2

vue3

<script>
    const person = {
      name:'lin',
      age:18,
    }
    // Proxy (target,object) 第一个参数是原对象(代理对象), 第二个参数Proxy里面的方法 get set deleteProperty
    // Reflect 反射对象
    const p = new Proxy(person,{
      //获取
      get(target,prop){
        // target=>代理对象  prop=>读取的属性
        console.log(target,prop,`有人读取p里面的${prop}数据`);
        return Reflect.get(target,prop)
      },
      //修改 新增
      set(target,prop,value){
        // target=>代理对象  prop=>修改的属性  value=>修改后的值
        console.log(target,prop,value,`有人修改p里面的${prop}数据, 我需要去更新界面`);
        Reflect.set(target,prop,value)
      },
      // 删除
      deleteProperty(target,prop){
        // target=>代理对象  prop=>删除的属性
        console.log(target,prop,`有人删除p里面的${prop}数据, 我需要去更新界面`);
        return Reflect.deleteProperty(target,prop)
      }
    })
  </script>