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