vue源码分析（watcher篇）

Posted 2021-05-18 一只燕仔

function Watcher(vm, exp, cb) {
    //在watcher的实例上保存回调函数
    this.cb = cb; //用于更新界面的回调函数
    this.vm = vm; //MVVM的实例vm
    this.exp = exp; //对应的表达式
    this.depIds = {}; 
    this.value = this.get(); //调用get方法
}

Watcher.prototype = {
    update: function() {
        this.run();
    },
    run: function() {
        var value = this.get();
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value; //调用构建watcher实例的时候传递过来的回调函数,让他的this指向为vm
            this.cb.call(this.vm, value, oldVal);
        }
    },

addDep: function(dep) {
    //判断当前depIds中是否已经有dep了
    //当模版首次更新的时候都是没有的,需要添加,当页面数据发生改变的时候同时会调用此方法
    if (!this.depIds.hasOwnProperty(dep.id)) {
        //调用dep的addSub方法进行对watcher实例的添加
        dep.addSub(this);//此时this是watcher的实例
        //添加当前的dep到depIds中,并且把dep.id的值作为depIds的key
        this.depIds[dep.id] = dep;
    }
},

    get: function() { //get方法
        //在watcher初始化的时候保存实例到Dep的target上
        Dep.target = this; //暂存this
        //调用get方法获取当前对应表达式的数据
        var value = this.getVMVal();
        //清空target
        Dep.target = null;  
        return value;
    },
   getVMVal: function() {
        var exp = this.exp.split('.'); //截取
        var val = this.vm._data;
        exp.forEach(function(k) { //循环
            //读取_data中所对应的值 
            val = val[k];
        });
        return val; //返回值
    }
};