function initState (vm) {
    // 省略..
    if (opts.computed) { initComputed(vm, opts.computed); }
}

function initComputed (vm, computed) {

    // 创建一个对象，挂载在vue实例的_computedWatchers上，这个属性保存的是计算属性的watcher
    var watchers = vm._computedWatchers = Object.create(null);
    
    var isSSR = isServerRendering();

    for (var key in computed) {
        
        // 这是用户自己定义的计算属性的getter
        var userDef = computed[key];
        var getter = typeof userDef === 'function' ? userDef : userDef.get;
        
        if (!isSSR) {
            // 为每一个计算属性都创建一个watcher
            watchers[key] = new Watcher(
                vm,
                getter || noop,
                noop,
                computedWatcherOptions
            );
        }
        
        // 判断是否有重名属性，如果没有重名属性，那么就调用defineComputed
        if (!(key in vm)) {
            defineComputed(vm, key, userDef);
        } else {
            if (key in vm.$data) {
                warn(("The computed property \"" + key + "\" is already defined in data."), vm);
            } else if (vm.$options.props && key in vm.$options.props) {
                warn(("The computed property \"" + key + "\" is already defined as a prop."), vm);
            }
        }
    }
}

var Watcher = function Watcher (vm,expOrFn,cb,options,isRenderWatcher) {
    // 省略代码..
    this.vm = vm;
    if (isRenderWatcher) {
        vm._watcher = this;
    }
    vm._watchers.push(this);
    
    // 用于控制计算缓存结果是否有效，将lazy赋值给dirty，只是给dirty一个初始值，表示控制缓存的任务开始了，是真正控制缓存的变量。
    this.dirty = this.lazy; 
    
    // 将计算属性的getter保存到watcher.getter上
    this.getter = expOrFn;
    
    // 保存计算属性的结果
    // 调用this.get()方法，其实就是获取计算属性的值
    this.value = this.lazy ? undefined : this.get();
};

Watcher.prototype.get = function get () {
    // 省略代码...
    var value;
    value = this.getter.call(vm, vm);
    return value
};

function defineComputed (target,key,userDef) {
    var shouldCache = !isServerRendering();
    // 这里就是设置计算属性的get和set
    // set默认是一个空函数
    // 这里就表示计算属性既可以是一个函数，也可以是一个对象
    // {get : fn , set : fn}或者fn
    if (typeof userDef === 'function') {
        sharedPropertyDefinition.get = shouldCache
        ? createComputedGetter(key)
        : createGetterInvoker(userDef);
        sharedPropertyDefinition.set = noop;
    } else {
        sharedPropertyDefinition.get = userDef.get
        ? shouldCache && userDef.cache !== false
        ? createComputedGetter(key)
        : createGetterInvoker(userDef.get)
        : noop;
        sharedPropertyDefinition.set = userDef.set || noop;
    }
    // 如果用户没有自己去设置计算属性的set，那么当用户直接去修改计算属性的值时，就会执行下面的警告。
    if (sharedPropertyDefinition.set === noop) {
        sharedPropertyDefinition.set = function () {
            warn(
                ("Computed property \"" + key + "\" was assigned to but it has no setter."),
                this
            );
        };
    }
    // 这里就是将计算属性挂载到vue实例上，这样我们就可以直接通过this.xx来获取计算属性的值。
    Object.defineProperty(target, key, sharedPropertyDefinition);
}

function createComputedGetter (key) {
    return function computedGetter () {
        // 获取每个计算属性对应的watcher
        var watcher = this._computedWatchers && this._computedWatchers[key];
        if (watcher) {
            // 如果计算属性依赖的数据发生变化，dirty会变成true，则表示数据脏了，要重新计算，然后更新watcher.value
            // 如果dirty为false，那么就会返回原来的值。
            if (watcher.dirty) {
                watcher.evaluate();
            }
            if (Dep.target) {
                watcher.depend();
            }
            return watcher.value
        }
    }
}

Watcher.prototype.evaluate = function evaluate () {
    // 重新计算
    this.value = this.get();
    // 重新设置dirty为false，表示缓存已更新
    this.dirty = false;
};

Watcher.prototype.get = function get () {
    // 这里可以改变Dep.target
    // 如果computed依赖其他一个数据的时候，那么这个数据的依赖收集器就会把这个computed watcher收集起来，等到这个数据发生变化的时候，就会通知所有依赖他的数据，及时更新。
    // 而此时的Dep.target指向computed watcher
    pushTarget(this);
    var value;
    var vm = this.vm;
    try {
        // 调用computed，返回computed的值，如果我们调用computed，发现computed还依赖其他数据，那么当我们访问其他数据的时候，又会在其他数据的get方法里，将当前的computed watcher添加到其他数据的依赖收集中。此时的Dep.target指向的还是computed watcher，只有调用了popTarget()才会把Dep.target指向上一个watcher
        value = this.getter.call(vm, vm);
    } catch (e) {
        if (this.user) {
            handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
        } else {
            throw e
        }
    } finally {
        if (this.deep) {
            traverse(value);
        }
        popTarget();
        this.cleanupDeps();
    }
    return value
};

Dep.target = null;
var targetStack = [];
function pushTarget (target) {
    // 将watcher缓存起来，便于后面恢复
    targetStack.push(target);
    // 目前这个数据依赖的watcher
    Dep.target = target;
}

function popTarget () {
    targetStack.pop();
    // 指向上一个watcher
    Dep.target = targetStack[targetStack.length - 1];
}

if (Dep.target) {
    watcher.depend();
}

function mountComponent (vm,el,hydrating) {
    updateComponent = function () {
        vm._update(vm._render(), hydrating);
    };
    // 创建页面watcher，当数据发生变化，就会调用watcher的getter方法，而这里是将updateComponent保持在getter上，所以就会调用updateComponent方法，进行更新
    new Watcher(vm, updateComponent, noop, {
        before: function before () {
            if (vm._isMounted && !vm._isDestroyed) {
                callHook(vm, 'beforeUpdate');
            }
        }
    }, true /* isRenderWatcher */);
}

var Watcher = function Watcher (vm,expOrFn,cb,options,isRenderWatcher) {
    // watcher的选项的默认值都是false
    if (options) {
        this.deep = !!options.deep;
        this.user = !!options.user;
        this.lazy = !!options.lazy;
        this.sync = !!options.sync;
        this.before = options.before;
    } else {
        this.deep = this.user = this.lazy = this.sync = false;
    }
    this.getter = expOrFn;
    // 在创建页面watcher的时候，一开始默认值都是false，所以会执行this.get()方法，从而调用watcher.get()
    this.value = this.lazy ? undefined : this.get();
}

Watcher.prototype.get = function get () {
    // 而此时，这里的this指的是页面watcher，所以Dep.target是页面watcher
    // 并且会把页面watcher缓存起来
    pushTarget(this);
    var value;
    var vm = this.vm;
    // 当调用watcher.getter方法，其实就是执行updateComponent方法，所以开始执行渲染更新。
    // 而在执行渲染的过程中，在渲染模板时，会读取模板中的数据，那么这个时候又会进行依赖收集
    value = this.getter.call(vm, vm);
}

Watcher.prototype.get = function get () {
    pushTarget(this);
    var value;
    var vm = this.vm;
    value = this.getter.call(vm, vm);
};

Object.defineProperty(obj , key , {
    get : function () {
        if (Dep.target) {
            // computed-watcher 也会保存到 data 的依赖收集器 dep
            dep.depend();
        }
    }
});

function createComputedGetter (key) {
    return function computedGetter () {
        var watcher = this._computedWatchers && this._computedWatchers[key];
        if (watcher) {
            if (watcher.dirty) {
                watcher.evaluate();
            }
            // 
            if (Dep.target) {
                watcher.depend();
            }
            return watcher.value
        }
    }
}