MVVM
MVVM全称是Model View ViewModel
MVVM 由三部分组成分别是：
M:Model
V:View
VM:ViewModel
在MVVM中 ，ViewModel之中有一个 Binder，或者是Data-binding engine。我们需要在View中声明View(视图)上所显示的东西 与Model的哪部分的数据进行绑定。在ViewModel更新Model上的数据时，Binder会自动将更行后的数据传给View。反过来当用户对View进行操作时，Binder会将数据自动更新到Model中 。这就是 双向数据绑定。
vue的双向数据绑定原理
vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。
当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法。
然后当setter方法触发完成的时候，内部会进一步触发watcher,当数据改变了，视图则更新操作完毕。
vue内部通过数据劫持&发布订阅模式实现数据的双向绑定
通过Object.defineProperty方法对所有的数据进行数据劫持，就是给这些数据动态的添加了getter与setter方法。
在数据变化的时候发布消息给订阅者（Watcher），触发响应的监听回调。
Object.defineProperty(obj,attr,desc)
方法中的三个参数分别是
- obj: 需要进行定义或修改属性的对象；
- attr: 需要进行定义或者修改的属性；
- desc: 该属性的描述符（包含存取描述符和数据描述符），该参数以一个对象的形式传入，该参数有六个选项：
- value: 设定该属性的值；
- writable: 布尔，该属性是否可写入（是否可改变其value）；
- enumerable: 布尔，该属性是否可被遍历得到（for…in， Object.keys等）；
- configurable: 布尔，设定该属性是否可被删除，且除writable外的其他描述符是否可被修改；
- get: 函数，该属性的值被获取时执行的回调函数（例如console.log(prop)），默认为undefined；
- set: 函数，该属性的值被设置时执行的回调函数，默认为undefined；
vue3 中的 Object.defineProperty 缺点。
1、无法监听es6的Set、Map 变化；
2、无法监听Class类型的数据；
3、属性的新加或者删除也无法监听；
4、数组元素的增加和删除也无法监听。
我们通过一个简单的实例来理解
var obj = {}
let middel = 123
Object.defineProperty(obj,"msg",{
get(){
return middel
},
set(val){
middel = val
}
})
console.log(obj.msg) //获取对象的属性的时候，会调用自身的get方法 返回123
obj.msg = 123456 //设置对象的属性的时候，会调用自身的set方法
console.log(obj.msg) //123456
当我们 打印obj.msg的时候 ， 就是去获取obj 中的msg的值 ，此时他就会去 desc 中调用 get方法 ，我们得到返回值 middel，打印123。 obj.msg = 123456 就是为obj中的msg 赋值 ，此时调用desc中的set 方法 将123456 作为参数val 传递，再将 val赋值给middel ，此时middel = 123456 。我们再次打印 obj.msg时返回的值也就是 123456。
