数据代理
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中对应的属性。
