vue - MVVM，数据代理

MVVM

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例

1. data中所有的属性，最后都出现在了vm身上。
2. vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

数据代理

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

let obj = { x: 100 }
let obj2 = { y: 200 }

Object.defineProperty(obj2, 'x', {
  get(){
    return obj.x
  },
  set(value){
    obj.x = value
  }
})

Vue 的数据代理：

vm._data === data    // data 指的是 new Vue({ data: {} }) 中的 data

vm.address, vm.name 都是通过 Object.defineProperty() 定义的，对其进行访问和修改时，会去获取和修改 vm._data 中的对应属性。

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