1. 何为数据代理 ？
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
- 上代码
<script type="text/javascript" >
let obj = {x:100}
let obj2 = {y:200}
//想通过obj2能获取x并且修改obj中的x
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
2.Vue中的数据代理
通过vm对象来代理data对象中属性的操作（读/写）
2.1 Vue中数据代理的好处：更加方便的操作data中的数据
2.2 实现原理
-
通过Object.defineProperty()把data对象中所有属性添加到vm上。
-
为每一个添加到vm上的属性，都指定一个getter/setter。
-
在getter/setter内部去操作（读/写）data中对应的属性。
过程解析:
-
如果有人读取name，getter工作，getter把data里面的name(data.name)给过去
-
如果有人通过vm改name,setter执行，把data里的name改掉
vm里的data就是存在了_data里面
用一张图来说明数据代理
贴代码
<body>
<div id="app">
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#app',
data:{
name:'平顶山学院',
address:'平顶山'
}
})
</script>
</body>
