1. Object.defineProperty方法
let number = 18;
let person = {
name: 'aaa',
sex: 'xx',
// age: 18
}
Object.defineProperty(person, 'age', {
value: 18,
enumerable: true, // 控制属性是否可以枚举,默认是false
writable: true, // 控制属性是否可以被修改,默认是false
configurable: true, // 控制属性是否可以被删除,默认是false
// 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get() {
return number;
},
// 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value) {
console.log('修改了age属性值为value');
}
}
2. 何为数据代理
通过一个对象代理对另一个对象中属性的操作(读/写)
let obj = {x: 100};
let obj2 = {y: 200};
Object.defineProperty(obj2, 'x', {
get() {
return obj.x;
},
set(value) {
obj.x = value;
}
}
3. vue中的数据代理
通过vm对象来代理data对象中的属性的操作(读/写)
可以更加方便的操作data中的数据
基本原理:
- 通过Object.defineProperty()把data对象中的所有属性添加到vm上
- 为每一个添加到vm上的属性,都指定一个getter和setter
- 在getter/setter内部去操作(读/写)data中对应的属性