vue---数据代理

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中对应的属性