vue2知识点：数据代理

文章目录

• ​​一、何为数据代理​​
• ​​二、vue中的数据代理​​
• ​​三、回顾Object.defineProperty()​​
• ​​本人其他相关文章链接​​

一、何为数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作(读/写)

let obj = {x:100}
    let obj2 = {y:200}

    Object.defineProperty(obj2, "x", {
        get() {
            return obj.x
        },
        set(value) {
            obj.x = value
        }
})

案例：在控制台通过obj2.x去修改x的属性值，并打印修改后的obj2结果，如下图

二、vue中的数据代理

问题：数据代理干了啥？

答案：

简单说：通过Object.defineProperty()方法把data对象所有属性添加到vm(Vue原型)对象上，且为每个属性指定一个getter/setter。

复杂说：首先vue把data对象所有属性添加到命名为_data的对象中，通过Object.defineProperty()方法把_data对象所有属性添加到vm(Vue原型)对象上，并为每一个添加到vm上的属性，都指定一个getter/setter，这样vm对象就有了属性name和address，不然你想操作属性只能使用_data.name_或者data.address，这样很不方便。

三、回顾Object.defineProperty()

回顾Object.defineProperty()方法，该方法可动态设置属性。
defineProperty(目标对象， key， {config})
注意点1：defineProperty中如果定义使用get()和set()，那么属性value和writable:true必须注释掉，不然报错
注意点2：如果defineProperty中只定义value属性，那么控制台赋值无效，即必须设置writable:true才能对person属性实现更新

let number = 18
let person = {
        name:"张三",
        sex:"男"
}

Object.defineProperty(person, "age", {
        value:18,
}

如果defineProperty()方法设置属性enumerable:true、writable:true、configurable:true就可实现跟局部定义变量属性一样的效果，可增删改

Object.defineProperty(person, "age", {
        value:18,
        enumerable:true,    //控制属性是否可以枚举(也就是是否可以遍历访问到)，默认值是false
        writable:true,      //控制属性是否可以被修改，默认值是false
        configurable:true,   //控制属性是否可以被删除，默认值是false
}

defineProperty()方法定义get()和set()

Object.defineProperty(person, "age", {       
        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
             console.log('有人读取age属性了')
             return number
         },
        // //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
         set(value) {
             console.log('有人修改age属性了')
            number = value
        }
    })