vue3笔记(模拟响应式)

模拟vue2响应式

      let x = {
            name:'李四',
            age:22
        }//源数据
      let y = {}
      Object.defineProperty(y,'name',{//数据代理
          // enumerable: true,//可以被枚举
          // writable:true,//可以被修改
          configurable:true,//允许删除name，
          get(){//有人读取name时调用
              return x.name
          },
          set(value){//有人修改name时调用，value是修改后返回值
              x.name = value
          }
      })

模拟vue3响应式

    const z = new Proxy(x,{//Proxy是window上内置构造函数
        //有人读取z的某个属性时调用
        get(target,propName){//taget是源数据，propName是读取的属性
            // return target[propName]
            return Reflect.get(target,propName)
        },
        //有人修改或添加z的某个属性时调用
        set(target, propName,value){//value是修改后值
            // target[propName] = value
            Reflect.set(target, propName, value)
        },
        //有人删除z的某个属性时调用
        deleteProperty(target, propName){
            // return delete target[propName]//delete删除一个属性返回布尔值
            return Reflect.defineProperty(target, propName)
        }
    
    })