源码的角度分析Vue2数据双向绑定原理

什么是双向绑定

我们先从单向绑定切入，其实单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。那么双向绑定就可以从此联想到，即在单向绑定的基础上，用户更新了View，Model数据也会自动被更新，这种情况就是双向绑定。实例如下：

 当用户填写表单，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下：

双向绑定的原理是什么

我们都知道Vue是数据双向绑定的框架，双向绑定由三个重要部分组成

• Model：应用数据以及业务逻辑
• View：应用视图，各类UI组件
• ViewModel：框架封装的核心，它负责将数据与视图关联起来

上面这个分层的架构方案，即是我们经常耳熟能详的MVVM，他的控制层的核心功能便是“数据双向绑定”

理解ViewModel

它的主要职责就是：

• 数据变化后更新视图
• 视图变化后更细数据

当然，它还有两个主要部分组成

• 监听器：对所有的数据进行监听
• 解析器（Compiler）：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

实现双向绑定

我们还是以Vue为例，先看看Vue中双向绑定流程是什么

1.new Vue()首先执行初始化，对data执行响应化处理，这个过程发生在Observe中（类似于Vue生命周期created之前执行的一系列初始化操作）

2.同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Complie中（类似于Vue生命周期mounted之前执行的一系列初始化操作）

3.同时定义一个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数

4.由于data的某个key在一个视图中可能会出现多次，所以每个key都需要一个管家Dep来管理多个Watcher

5.将来data中数据一旦发生变化，会首先找到ui应的Dep，同时所有Watcher执行更新函数

流程图如下：