vue简版源码 Watcher

vue简版源码 Watcher篇

相关链接：MVVM篇 、 Observer篇 、 Compile篇

function Watcher(vm, exp, cb) {
    //在watcher的实例上保存回调函数
    this.cb = cb; // 回调函数，用于更新页面
    this.vm = vm; // MVVM的实例vm
    this.exp = exp; // 对应的表达式
    this.depIds = {}; // n个相关的dep的容器
    this.value = this.get(); // 当前表达式对应的value
}

Watcher.prototype = {
    // 在 Observer.js 里 set 方法中触发,每当进行写（赋值）操作的时候会触发set函数，然后通知订阅者 Watcher 调用 update 函数更新视图
    update: function() {
        this.run();
    },
    run: function() {
        var value = this.get(); // 当前表达式对应的最新的value
        var oldVal = this.value; // 当前表达式对应的旧的 value
        if (value !== oldVal) {  // 判断新旧值不一样，那就把最新的值赋值给 当前表达式对应的value
            this.value = value;
            //调用构建watcher实例的时候传递过来的回调函数,并且确定他的this指向为vm
            this.cb.call(this.vm, value, oldVal); // 在 Compile.js bind 方法中
        }
    },
    addDep: function(dep) {
     // this.depIds：n个相关的dep的容器  hasOwnProperty：判断是不是自己私有的属性，
     // 取非的意思是假如相应属性的dep.id已经在当前		watcher的depIds里，说明不是一个新的属性，仅仅是改变了其值而已， 则不需要将当前watcher添加到该属性的dep里
        if (!this.depIds.hasOwnProperty(dep.id)) { 
            dep.addSub(this); // 在 Observer.js 里调用 dep 的方法添加自己 ， 这里的this 代表 window 订阅者
            this.depIds[dep.id] = dep; 
        }
          // 1. 每次调用run()的时候会触发相应属性的getter
        // getter里面会触发dep.depend()，继而触发这里的addDep
        // 2. 假如相应属性的dep.id已经在当前watcher的depIds里，说明不是一个新的属性，仅仅是改变了其值而已
        // 则不需要将当前watcher添加到该属性的dep里
        // 3. 假如相应属性是新的属性，则将当前watcher添加到新属性的dep里
        // 如通过 vm.child = {name: 'a'} 改变了 child.name 的值，child.name 就是个新属性
        // 则需要将当前watcher(child.name)加入到新的 child.name 的dep里
        // 因为此时 child.name 是个新值，之前的 setter、dep 都已经失效，如果不把 watcher 加入到新的 child.name 的dep中
        // 通过 child.name = xxx 赋值的时候，对应的 watcher 就收不到通知，等于失效了
        // 4. 每个子属性的watcher在添加到子属性的dep的同时，也会添加到父属性的dep
        // 监听子属性的同时监听父属性的变更，这样，父属性改变时，子属性的watcher也能收到通知进行update
        // 这一步是在 this.get() --> this.getVMVal() 里面完成，forEach时会从父级开始取值，间接调用了它的getter
        // 触发了addDep(), 在整个forEach过程，当前wacher都会加入到每个父级过程属性的dep
        // 例如：当前watcher的是'child.child.name', 那么child, child.child, child.child.name这三个属性的dep都会加入当前watcher
    },
    get: function() {
        // 给Dep构造函数的target属性 进行赋值 this 是 watcher 实例，也是订阅者 
        // 在这很容易遇到一个坑就是 Dep 怎么来的，我在Observer里说了 它是挂载在 window 上的 在哪都能调用
        Dep.target = this;
        var value = this.getVMVal();  // 获取当前属性的属性值
        Dep.target = null; 
        return value;
    },

    getVMVal: function() {
        var exp = this.exp.split('.'); // 防止点式调用的方法 {{ data.obj.name }} ，转成数组 [data,obj,name]
        var val = this.vm._data; // 暂存一下data
        exp.forEach(function(k) { // 对转换的数组进行遍历（也就是data中的属性名），
            val = val[k];  // 每遍历一遍就对val 重新赋值 ，确保到最后是我们想要的属性值
        });
        return val; // 返回当前属性的属性值
    }
};