Vue中的数据代理

最近学习了下Vue中的数据代理，便于自己理解，在此记录下，希望对看此文章的你有帮助。

什么是数据代理

在理解数据代理之前要对 Object.defineProperty（）比较熟悉，因为Vue中很多底层的数据代理都是使用Object.defineProperty（）来实现的。
数据代理：简单的说就是通过一个对象代理对另一个对象中属性的操作（读/写）

<script>
        // 最简单的数据代理例子
         let obj1 = {x:1};
         let obj2 = {y:2};
         Object.defineProperty(obj2,'x',{
             get(){
                 return obj1.x
             },
             set(value){
                obj1.x = value
             }
         })
    </script>

Vue中的数据代理

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

 vm.name = '小宋子'； 此时是修改了vm的name的值，就触发了name的setter方法，setter方法就修改了data中的name，
  Vue检测到data中的数据变化，界面也跟着发生改变 
<div id="root">
        <div>{{name}}</div>
        <div>{{address}}</div>
 </div>
 <script>
     Vue.config.productionTip  = false;
        // let data = {
        //     name:'小宋子',
        //     address:'北京市'
        // }
    var vm = new Vue({
            el:'#root',
            // data 
            data:{// data 就是vm下的_data   vm._data = options.data = data
                name:'小宋子',
                address:'北京市'  
            }
    })

借用尚硅谷老师的一张图，放此处，方便自己理解：
注意：_data里面不是数据代理，而是做了一个数据劫持。Vue去检测_data中的数据变化，从而达到界面也跟着变化
添加到vm上的属性才是数据代理