Vue数据代理劫持底层原理

let data = {
    username:'zhangsan',
    age:18
}

// 模拟组件实例
//通过object.defindproprety来实现数据劫持代理
let _this = {
    test:123
}

for(let i in data){
    console.log(i,data[i])
    //参数：目标对象，添加的属性（键）,值
    Object.defineProperty(_this,i,{
        //get作用： 获取扩展属性值,当获取该属性值的时候，调用get方法
        get() {
            console.log('get调用')
            return data[i]
        },
        //set作用：监视扩展属性的值，只要修改就调用
        //注意：不能在set方法里做修改扩展属性值，会陷入死循环 【_this.age = value】
        //再次通过修改data里的属性值，来改变_this
        set(value){
            console.log('set调用',value)
            // data.age = value
            data[i] = value
        }

    })
}
//通过Object.defineProperty()，获取的扩展属性不能直接修改，但会触发set()方法
_this.age = 20
console.log(_this)