vue2知识点：数据代理

刘大猫.

墨衍会员 · AI 创作全网分发码龄9年

关注

原创 2022-07-22 20:11:58 1.7k 阅读 AI 写同款· GEO 优化 ›

vue2项目从0搭建(二):配置代理,登录功能和菜单权限 vue2项目token校验和权限校验阅读详情

在这里插入图片描述

文章目录

一、何为数据代理
二、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
        }
    })