1 说明
所谓“数据代理”，是指 通过一个对象代理对另一个对象的属性进行读或写操作。
2 简单示例
2.1 代码
let obj = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2,"x",{
get(){
return obj.x;
},
set(value){
obj.x = value;
}
})
2.2 效果
通过obj2代理对obj的属性进行操作，如下所示
设置obj2.x=333,obj.x值也改变
3 Vue中的数据代理
3.1 代码
<body> <div id="root"> <h1>{{name}}</h1> <h1>{{address}}</h1> </div> <script type="text/javascript" > let data = { name:'历史', address:'杭州' } const vm = new Vue({ el:'#root', data }) </script> </body>
3.2 效果
Vue中的数据代理是：通过vm对象代理对data对象的属性进行操作（读或写），如下所示
设置vm.name的值，data.name也改变
另外，请注意一点：vm._data === data，返回true
3.3 基本原理
3.3.1 说明
Vue中数据代理的基本原理是，通过Object.defineProperty()将data对象中的属性添加到vm对象上，并为每个添加到vm上的属性指定getter和setter，在getter和setter中对data对象的属性进行读或写操作
3.3.2 示例
代码同上
控制台查看vm对象，发现它有address属性和name属性，还有一个_data属性
查看这三个属性的值，发现就是data对象的值。
所以vue是这么做的，data对象放在_data里面，且在vm最外层添加了属性address和name，并且给了setter和getter函数，代理data对象
3.3.3 图示
