03_比较vue3和vue2的数据代理

比较vue3和vue2的数据代理

vue2的响应式

• 核心
  • 对象:通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
  • 数组:通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

Object.defineProperty(data,'count',{
    get () {}
    set () {}
})

• 问题
  • 对象直接新添加的属性或删除已有属性,界面不会自动更新
  • 直接通过下标替换元素或更新length,界面不会自动更新arr[1] = {}

vue3的响应式

• 核心:
  • 通过Proxy(代理):拦截对data任意属性的任意(13种)操作,包括属性值的读写,属性的添加,属性的删除等…
  • 通过Reflect(反射):动态对被代理对象的相应属性进行特定的操作。
  • 文档:
    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

//目标对象
const user = {
    name:'ss',
    age:20,
    wife:{
        name:'xx',
        age:19
    }
}
//把目标对象变成代理对象
//参数1：user => target 目标对象
//参数2：handler => 处理器对象，用来监视数据 及 数据的操作
const proxyUser = new Proxy (user,{
    //查找
    get(target, prop){
        console.log('Get被调用')
        //通过反射对象把数据反射出去
        return Reflect.get(target,prop)
    }
    //修改 && 添加
    set(target,prop,val){
        console.log('Set被调用')
        return Reflect.set(target,prop,val)
    }
    //删除
    deleteProperty(target,prop){
        console.log('delet被调用')
        return Reflect.deleteProperty(target,prop)
    }
})

//通过代理对象获取目标对象中的某个属性值
console.log(proxyUser.name)
//通过代理对象更新目标对象上的某个属性值
proxyUser.name = 'x65'
//通过代理对象向目标对象添加一个新的属性
proxyUser.gender = '男'