回顾Object.defineProperty方法:
let number = 18
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
value:18,
enumerable:true, // 控制属性是否可以枚举(遍历),默认值是false
writable:true, // 控制属性是否可以被修改,默认值是false
configuranle:true, // 控制属性是否可以被删除,默认值是false
// 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get:function(){ // 可以缩写 去掉function
return number
}
// 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value){ // 可以缩写 去掉function
number = value // 修改的值是value
}
})
数据代理:
// 数据代理就是通过一个对象代理对另一个对象中属性的操作(读/写)
let obj = {x:100}
let obj2 = {y:200}
// 想通过obj2能读到x 或者修改x
Object.defineProperty(obj2,'x'{
get(){
return obj.x
},
set(){
obj.x = value
}
})
1、Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2、Vue中数据代理的好处:
更加方便的操作data中的数据
3、基本原理:
通过Object . defineProperty() 把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作 (读/写) data中对应的属性