VUE2双向绑定的原理

VUE2双向绑定的原理

1. 什么是双向绑定

• 讲双向绑定先讲单项绑定，啥叫单项绑定，就是一句话就是通过Model去改变View，再直白点，就是通过js代码把数据改变后，html视图也跟着变化
• 那双项绑定就很好理解了，在单项绑定的基础上，如果view改变了，Model也能同步变化
• 一句话概括就是，Model变化View跟着跟新，View跟新，Model跟着变化，这就是双向绑定

2. 双向绑定的原理

• 其实我们可以很容易想到一点就是，如果A变化了想要B跟着变化，最简单的方式就是，A变化的时候通知一下B就行，这就是基本思路
• 在VUE2 中，双向绑定由三个重要部分构成

1. 数据层（Model），应用的数据及业务逻辑
2. 视图层（View），应用的展示效果，理解为UI组件
3. 业务逻辑层（ViewModel），框架封装的核心，他主要负责把数据层和视图层关联起来，这就是MVVM模型

2.1 ViewModel的重要作用

• ViewModel主要干两件事

1. 数据变化后，更新视图
2. 视图变化后，更新数据

• 那么问题来了，怎么通知呢，我们怎么知道数据变化后，通知哪些视图呢
• 这要依赖ViewModel的两个重要部件

1. 监听器（Observer）,对所有数据的属性进行监听
2. 解析器（Compiler）,对元素节点的指令进行扫描跟解析，根据指令模板替换数据，以及绑定相应的更新函数

2.2 双向绑定的流程

• 双向绑定的流程

1. 我们在new Vue（）时，执行初始化，对data执行相应化处理，这个过程发生在Observer中
2. 同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compiler中
3. 同时定义一个更新函数和Watcher，将来对应数据变化时，Watcher会调用更新函数
4. 由于data中的数据的某个key可能出现在视图的多处，所以每个key都需要一个管家Dep来管理多个Watcher
5. 将来数据一旦发生变化，会首先找到对应的Dep，通过Dep李曼的所有Watcher执行更新函数
   

3. 双向绑定的实现

3.1 data响应化处理

• 我们来创建一个构造函数，执行初始化，对data数据执行响应化处理

class Vue{
   
   
    constrcutor(options){
   
   
        this.$options=options;
        this.$data=options.data;
        //对data选项做响应式处理
        Observe(this.$data)
        //代理data到vm上
        proxy(this)
        // 执行编译
        new Compile(options.el,this)
    }
}
function Observe(obj){
   
   
    if(typeof obj!=='object' || obj===null){
   
   
        return;
    }
    new