数据代理:通过一个对象代理对另一个对象中属性的 *** 作(读/写)
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2, "x", {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})
二、vue中的数据代理案例:在控制台通过obj2.x去修改x的属性值,并打印修改后的obj2结果,如下图
问题:数据代理干了啥?
答案:
简单说:通过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()方法,该方法可动态设置属性。
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
}
})
本人其他相关文章链接
1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《vue案例练习:Vue表单创建一行数据及删除数据的实现与理解》
4.《vue组件通信案例练习(包含:父子组件通信及平行组件通信)》
5.《vue2基础组件通信案例练习:待办事项Todo-list案例练习》
6.《把案例Todo-list改写成本地缓存》
7.《vue2知识点:计算属性与监听属性》
8.《vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)》
9.《vue2知识点:事件处理》
10.《vue2知识点:数据代理》
11.《vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)》
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)