一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
我要一步一步往上爬~大家好，今天我们来一起学习一下数据代理这个概念。
一、数据代理
定义：一个对象去代理另一个对象属性的操作，包括读写操作
我们借助一段代码更好的去理解：
<script type="text/javascript" >
let obj1 = {a:111}
let obj2 = {b:222}
Object.defineProperty(obj2,'a',{
get(){
return obj1.a
},
set(value){
obj1.a = value
}
})
</script>
解释：对象obj1的a值为111，对象obj2的b值为222，我们使用对象的defineProperty操作对象obj2，get方法里面定义返回对象obj1的a值，也就是查看对象1的a值，set方法里定义设置obj1的a为指定值，也就是可以操作另一个对象1的属性a值。
结果展示
可以看出，通过obj1和obj2都可以去操作属性a，这就是数据代理的作用！
二、Vue的数据代理
定义：使用vm对象去代理data对象中属性的操作，这样做的好处是不用在模板中去写_data.属性值这样的表达式了，操作data中的属性就更加方便了。
实现原理解释：
一切源自于我们编写的代码片段，我们创建了一个vm实例对象，Vue会为vm准备诸多属性，这里面就包括了_data属性，Object.defineProperty()方法会把data中对象的所有属性（这里指name和age）赋值给_data,此时vm身上是没有name和age的，它要通过vm._data才能访问到name和age
如果Vue没有数据代理，我们的代码就会变成下面这样，是不是很麻烦！
<div id="root">
<h2>名字：{{_data.name}}</h2>
<h2>年龄：{{_data.age}}</h2>
</div>
所以Vue的数据代理所做的事情就是，通过getter/setter方法，去读取/设置_data中的值给vm，这样就省去了复杂的代码，可以很简单的使用data中定义的属性了！
