vue源码分析（watcher篇）

心已赠人 2023-01-18 11:27 194阅读 0赞

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; //返回值
        }
    };