vue-双向响应数据底层原理分析

总所周知,vue的一个大特色就是实现了双向数据响应,数据改变,视图中引用该数据的部分也会自动更新

一.双向数据绑定基本思路

“数据改变,视图中引用该数据的部分也会自动更新“,从这句话,我们可以分析出以下几点:

• 数据要绑定监听事件
• 视图要绑定更新事件
• 监听事件会触发更新事件

vue的双向数据响应也是基于以上思路开发的

二.vue基于数据劫持+发布订阅模式实现双向绑定

2.1数据劫持

利用Object.defineProperty深度遍历每个响应数据,给每个响应数据和其子属性添加get和set方法.

Object.defineProperty的get方法在数据被调用时执行.所以get()用于收集依赖,所谓的依赖就是使用当前响应数据的dom

Object.defineProperty的set方法在数据修改时被执行.所以set()方法用于通知监听事件,我的数据更新了defaultReative(data,key,value)

defaultReative(data,key,value){
        //先去做递归
        this.observer(value);
        //给每个响应数据的get方法上都添加一个dep实例
        var dep = new Dep();
        //数据劫持
        Object.defineProperty(data,key,{
            get(){
                 /*在渲染html的时候会调用响应数据,也就执行了get方法;watcher实例是订阅者,渲染时会给当前dom初始化一个watcher实例,也就是给当前的dom添加了订阅者,
　　　　　　　　　* 订阅者内部会有更新dom的方法,数据变化的时候,发布者通知订阅者,订阅者内部去调用更新dom的方法.
 
　　　　　　　　　* watcher内部有dep.target赋值操作,赋值为watcher本身,
　　　　　　　　　　这样才能确保有我们收集的依赖就是调用了当前响应数据的订阅者.
　　　　　　　　　*/
                Dep.target && dep.addDep(Dep.target);
                return value;
            },
            set(newVal){
                if(newVal == value)return;
                //赋值操作 当外部设置data身上的某个属性的时候 将新值赋值给旧值
                value = newVal;
 
                dep.notify();
 
            }
        })
    }

dep是发布订阅模式的一环,会在下面讲解

2.2发布订阅模式

发布—订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案.这种模式让一个对象不在显示地调用另一个对象的接口,实现了多个对象松耦合联系在一起.

只需要订阅感兴趣的事件发生点,当事件执行时就会通知给所有订阅者.

一个简单的发布-订阅模式的实现主要是以下三点内容：

• 指定好发布者;
• 发布者有一个缓存列表，里面存放了回调函数，以便发布后通知订阅者;
• 发布消息的时候遍历缓存列表，依次触发订阅者的回调

在vue中dep就类似发布者,下面是dep的实现

class Dep{
    constructor(){
        this.deps = [];
    }
    addDep(dep){
        this.deps.push(dep);
    }
    notify(){
        this.deps.forEach((item)=>{
            item.update();
        })
    }
}

我们给每一个响应数据get()内部添加一个deps列表,列表内部就是调用该响应数据的订阅者,

我们给每一个响应数据set()内部添加一个dep.notify(),这个方法去通知订阅者调用内部的更新函数,更新视图

defaultReative(data,key,value){
        //先去做递归
        this.observer(value);
        //给每个响应数据的get方法上都添加一个dep实例
        var dep = new Dep();
        //数据劫持
        Object.defineProperty(data,key,{
            get(){
                 /*在渲染html的时候会调用响应数据,也就执行了get方法;watcher实例是订阅者,渲染时会给当前dom初始化一个watcher实例,也就是给当前的dom添加了订阅者,
　　　　　　　　　* 订阅者内部会有更新dom的方法,数据变化的时候,发布者通知订阅者,订阅者内部去调用更新dom的方法.
 
　　　　　　　　　* watcher内部有dep.target赋值操作,赋值为watcher本身,
　　　　　　　　　　这样才能确保有我们收集的依赖就是调用了当前响应数据的订阅者
　　　　　　　　　*/
                Dep.target && dep.addDep(Dep.target);
                return value;
            },
            set(newVal){
                if(newVal == value)return;
                //赋值操作 当外部设置data身上的某个属性的时候 将新值赋值给旧值
                value = newVal;
 
                dep.notify();
 
            }
        })
    }

watcher

watcher类似订阅者,他会和dom去做关联.watcher内部有一个update方法,用于更新dom节点.

watcher也会跟Dep做关联,在constructor中,调用dep.target=this,目的是让Dep指向当前的watcher.响应数据对应的订阅者不同,每个响应数据收集到对应的依赖就需要指定this,因为在渲染dom的时候,我们会给每个dom节点都初始化一个watcher实例,this就是这个watcher实例

下面是一个watcher方法的实现

//监听数据的变化
class Watcher{
    constructor(vm,exp,callback){
        this.$vm = vm;
        this.$exp = exp;
        this.callback = callback;
        //给dep添加了一个静态属性target,值是watcher自己
        Dep.target = this;
        //触发属性的getter方法
        this.$vm[this.$exp];
        Dep.target = null;
    }
    //在index.js中一旦数据有变动会触发dep.notify方法，
        //nodity会遍历dep中收集的watcher,调用watcher中的update方法,在update方法中执行,
        //这里(compile)传递给watcher的方法(updateFn)更新视图
    update(){
        //视图更新
        this.callback.call(this.$vm,this.$vm[this.$exp])
    }
}

在渲染dom的时候,将dom方法的更新函数传递给watcher做回调

 update(el,vm,exp,type){
        //为了其他的一些指令需要的一些公共的逻辑在这个方法里面编写
        //比如这里是text指令,updateFn=textupdate
        var updateFn = this[type+'update'];
        //如果textupdate方法存在,就去执行textupdate方法
        updateFn && updateFn(el,vm[exp]);
        //给每个节点都添加上监听
        //添加监听数据的订阅者(给watcher传递数据和回调)，在index.js中一旦数据有变动会触发dep.notify方法，
        //nodity会遍历dep中收集的watcher,调用watcher中的update方法,在update方法中执行,
        //这里(compile)传递给watcher的方法(updateFn)更新视图
        new Watcher(vm,exp,(value)=>{
            updateFn && updateFn(el,value);
        });
    }

总结.

vue在编译html模版的时候,会给每个dom节点初始化watcher订阅者,把该节点的更新函数传递给watcher类中

vue在初始化时会深度遍历每一个响应属性,给每个响应属性添加上get和set方法,当html渲染时用到了响应数据就去调用get方法得到数据,同时get内部通过依赖收集知道了调用的订阅者都有那些;

在修改响应数据时会调用set方法,在方法内部通过dep.notify通知订阅者,订阅者去调用update更新dom节点