Vue双向绑定原理及实现

什么是MVVM？

一、概念介绍

• MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）

1、 M：模型层，主要负责业务数据相关；

2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；

3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

简单理解

• vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。
  当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法。
  然后当setter方法触发完成的时候，内部会进一步触发watcher,当数据改变了，视图则更新操作完毕。

图解

## 代码
```
    var obj = {}
    let middel = 100
    Object.defineProperty(obj,"msg",{
        get(){
            //console.log("get方法被执行了")
            return middel
        },
        set(val){
            // console.log("set方法被执行了",val)
            // obj.msg = val
            middel = val
        }
    })

    //console.log(obj.msg)   //获取对象的属性的时候，会调用自身的get方法
    obj.msg = 1111           //设置对象的属性的时候，会调用自身的set方法
    console.log(obj.msg)  

```

复杂一点(参考)

• vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
  我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

• 1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

• 2.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。

• 3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）。