Vue依赖更新原理分析

依赖更新分为两步

1. 修改属性值
2. 通知之前收集到的依赖，进行更新

dep主要用来存储依赖

var Dep = function() {
    this.subs = [];
}
Dep.prototype.notify = function() {
    var subs = this.subs.slice();
    for (var i = 0; i < subs.length; i++) {
        // 遍历依赖存储器，然后一个个调用`watcher.update`
        subs[i].update();
    }
}

那watcher.update中到底发生了什么？可以来具体看一下Watcher类的源码

function Watcher(vm, expOrFn) {
    this.vm = vm;
    // 保存更新函数
    this.getter = expOrFn;
    // 新建watcher的时候立即执行更新函数
    this.get();
}
Watcher.prototype.get = function() {
    this.getter.call(this.vm, vm);
}
Watcher.prototype.update = function() {
    this.get();
}

那Watcher是什么时候，传入这个更新函数的，其实各个类型的Watcher都不一样，以页面watcher举例

Vue.prototype.$mount = function() {
    ...解析template成redner函数保存
    /** 每个实例新建一个watcher，
           并且利用watcher 保存更新函数 **/
    new Watcher(this,        
        // 这个函数是更新函数，传入watcher保存下来，用于后面页面初始化或者页面更新
        function() {
            ...调用保存的渲染函数生成VNode，
                          并生成DOM插入页面中
        }
    );
};