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 图示

巴特西

Vue08 数据代理