Vue 2x 系列之（六）数据代理

数据代理

1. Object.defineProperty【ES6中的知识点】

用于给一个对象添加/定义属性，可以对追加的属性进行很多高级的限制【比如控制属性是否可以枚举、修改、删除】

Object.defineProperty方法在Vue中的应用

数据劫持
数据代理
计算属性

Object.defineProperty方法的几个参数：

给哪个对象添加属性【对象】、要添加的属性名【属性名】、配置项【配置对象】

配置项有哪些：

value：指定要添加的属性对应的值
enumerable：控制属性是否可以枚举，默认值是false
writable：控制属性是否可以被修改，默认值是false
configurable：控制属性是否可以被删除，默认值是false
get：当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
```
get(){
	console.log('有人读取age属性了')
	return number
}
```
set：当有人修改person的age属性时，set函数(setter)就会被调用，value的值就是收到的修改的具体值
```
set(value){
	console.log('有人修改了age属性，且值是',value)
	number = value
}
```

注：通过Object.defineProperty方法可以实现对象中的某个属性和一个变量的值进行绑定，属性的值改变，变量的值就改变，变量的值改变，属性的值也会相应的改变

遍历对象的方法：

console.log(Object.keys(对象))
forin：foin不仅可以遍历对象，还可遍历数组

特点：

默认情况下，用Object.defineProperty方法为对象添加的属性是不可枚举的【不参与遍历】
默认情况下，用Object.defineProperty方法为对象添加的属性是不可修改的
默认情况下，用Object.defineProperty方法为对象添加的属性是不可删除的

2. 何为数据代理

首先有两个对象，A和B，以B代理A为例，通过读/写B中的属性可以实现读/写A中属性的值【实际上就是代理对象实现了代替被代理对象读取/修改被代理对象属性值的功能】

一句话总结：

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<script type="text/javascript">
	let a = {
		x: 100
	}
	
	let b = {
		z: 200
	}
	
	Object.defineProperty(b, 'x', {
		get(){
			return a.x
		},
		
		set(value){
			a.x = value
		}
	})
</script>

3. Vue中的数据代理

对象的简写形式

https://www.yisu.com/zixun/668320.html

https://www.cnblogs.com/w-sir/p/15139039.html

Vue实例对象身上以及Vue原型对象上的所有属性和方法都可以在模板中使用

1.Vue中的数据代理：
			通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
			更加方便的操作data中的数据，没有数据代理的话也能操作，但是比较麻烦
3.基本原理：
			通过Object.defineProperty()把data对象中所有属性添加到vm上。
			为每一个添加到vm上的属性，都指定一个getter/setter。
			在getter/setter内部去操作（读/写）data中对应的属性。