本文已参与[新人创作礼]活动，一起开启掘金创作之路。

数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）。

定义两个对象，使用Object.defineProperty()使studentList能够读取和修改personList里面的name属性值：

...
// 通过studentList读取和修改personList里面的属性。
let personList = {
  name: '姓名',
  address: '上海市'
}
let studentList = {
  class: '所在班级'
}
Object.defineProperty(studentList,'name',{
  get(){
    // 此时，返回值为设置的personList.name的值。该操作时读取personList.name属性的值。
    return personList.name;
  },
  set(value){
    // 此时，将修改后的值赋值给personList.name，这样使用get读取时才是更新后的值。该操作时修改personList.name属性的值。
    personList.name = value;
  }
})
// 修改前
console.log(personList);
console.log(studentList);
// 修改后
studentList.name = '999';
console.log(personList);
...

修改前的personList：

defineProperty给studentList设置name属性，关联personList对象的name属性：

使用studentList修改name属性后的personList：

Vue中使用数据代理

在一个组件的data中设置值：

...
data(){
    return{
      name: '姓名',
      address: '上海市'
    }
},
mounted(){
    console.log(this);
}
...

通过答应组件实例对象，可以看见实例对象里面由name和address：

并且，使具有get和set：

当读取name时：通过name的get（getter）方法读取data对象中的name。

读取->getter->data.name

当设置name时：通过name的set（setter）方法修改data对象中的name。

修改->setter->data.name

Vue中数据代理：将vm中_data中的属性，拿出来直接放在vm上，通过get和set去关联。如果值发生变化，则_data中的值也会发生变化，这时页面的值就会变化。

_data是对里面的数据做了数据劫持，能够实现数据双向绑定。

Vue中数据代理：通过vm对象来代理data对象中属性的操作（读/写）。

Vue中数据代理的好处：更加方便的操作data中的数据。

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

Vue数据代理

数据代理

Vue中使用数据代理