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 Observer(obj)
}
class Observer{
    constructor(value){
        this.value=value;
        this.walk(value)
    }
    walk(obj){
        Object.keys(obj).forEach((key)=>{
            defineReactive(obj,key,obj[key])//内部是Object.defineProperty实现，后面会讲
        })
    }
}

3.2 Compile编译

• 对元素节点的指令机型扫描跟解析，根据指令模板替换数据，以及绑定相应的更新函数

class Compile{
    constructor(el,vm){
        this.$vm=vm;
        this.$el=document.querySelector(el);//获取DOM
        if(this.$el)this.compile(this.#el)
        
    }
    compile(el){
        const childNodes=el.ChildNodes;
        Array.from(childNodes).forEach((node)=>{//遍历子元素
            if(this.isElement(node)){//判断是否为节点
                /*编译元素*/
            }else if(this.inInterpolation(node)){//是否为差值文本
                /*编译差值文本*/
            }
            if(node.childNodes && node.childNodes.length>0){
                this.compile(node)
            }
        })
    }
    isElement(node){
        return node.nodeType===1
    }
    isInterpolation(node){
        return node.nodeType===3 && /\{\{(.*)\}\}/.test(node.textContent)
    }
}

3.3 依赖收集

• 视图中会用到data中的某个key，这被称为依赖，一个key可能出现在视图中的多个位置，每次都需要收集出来用一个Watcher来维护他们，这个过程被称为依赖收集，很多歌Watcher需要一个Dep来管理，需要更新时由Dep统一通知
  

• 基本思路

1. defineReactive为每一个key创建一个Dep，比如data1创建Dep1
2. 初始化视图时，读取某个key，例如data1，就创建一个watcher1
3. 由于读取key时触发getter方法，边疆watcher1天假到data1的Dep1中份
4. 当data1更新时，触发setter，通过Dep1通知所有的watcher更新

class Wacther{
    constructor(vm,key,updater){
        this.$vm=vm;
        this.$key=key;
        this.updaterFn=updater;
        //创建实例时，把当前实例指定到Dep.target静态属性上
        Dep.target=this;
        vm[key]//读一下key，触发get
        Dep.target=null
        update(){
            this.updaterFn.call(this.$vm,this.$vm[this.$key])
        }
    }
}
class Dep{
    constructor(){
       this.deps=[];//依赖管理 
    }
    addDep(dep){
        this.deps.push(dep)
    }
    notify(){
        this.deps.forEach((dep)=>{
            dep.update()
        })
    }
}
// 创建Watcher时触发getter
function defineReactive(obj,key,val){
    this.observe(val)
    const dep=new Dep()
    Object.defineProperty(obj,key,{
        get (){
            Dep.target && dep.addDep(Dep.target)//Dep.target就是Watcher实例
            return val
        },
        set(newVal){
          if(newVal===val)return
          dep.notify()//通知dep执行更新方法  
        }
    })
}