关于computed
前言:
前言就是有了前几篇的基础对于vue相应式原理的初步了解之后，再去看这两个东西会方便很多。写这篇文章是为了一个梳理，还有一些其他的原因，年底再说。
先看computed
computed是在initState的时候，并且在初始化data之后，进行初始化的，来看看初始化的时候它干了什么：
function initComputed (vm, computed) {
// $flow-disable-line
var watchers = vm._computedWatchers = Object.create(null);
// computed properties are just getters during SSR
var isSSR = isServerRendering();
for (var key in computed) {
var userDef = computed[key];
var getter = typeof userDef === 'function' ? userDef : userDef.get;
if (getter == null) {
warn(
("Getter is missing for computed property \"" + key + "\"."),
vm
);
}
if (!isSSR) {
// create internal watcher for the computed property.
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
);
}
// component-defined computed properties are already defined on the
// component prototype. We only need to define computed properties defined
// at instantiation here.
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);
}
}
}
}两参数vm computed就是当前的vm组建和实例上的computed属性，说的通俗点就是new Vue的时候写的那个computed，然后我直接关注for in 里的代码：这里拿到computed上的key和对应的value之后，第一步是取得computed里key对应的value，这里value可能会是一个函数，一个对象，如果是函数就直接取，如果是对象就取他的get方法，然后会为当前的key生成一个watcher：
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
);
//computedWatcherOptions 等于 var computedWatcherOptions = { lazy: true };这里啊，这个lazy如果你对watcher构造函数的源码模糊了，建议重新打开一个窗口看看，computed从源码角度来讲，为什么data里的值变了之后才会跟着变呢，是因为这个地方，
第二步是判断当前key是否与props或data里边的key重复，有则警告，没有就调用defineComputed：
function defineComputed (
target,
key,
userDef
) {
var shouldCache = !isServerRendering();
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;
}
if (sharedPropertyDefinition.set === noop) {
sharedPropertyDefinition.set = function () {
warn(
("Computed property \"" + key + "\" was assigned to but it has no setter."),
this
);
};
}
Object.defineProperty(target, key, sharedPropertyDefinition);
}
//这里
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
};直接看最后一句，vue的老套路了，劫持一个对象的属性的get set，还有一层作用是执行vm.key的时候把这个操作代理到了当前定义的get上，其实computed的set不怎么常用，那来看看这里的get是什么：shouldChache是isServerRendering的执行结果取反的结果，isServerRendering 字如其名自然跟服务端渲染相关，看源码的话，当在服务端运行的时候此值才有可能取真值，那这里他就是false，然后，shouldChache自然取true，接着走，然后computed对应的value一般为function，所以这里执行createComputedGetter：
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
}
}
}这里实际是把key闭了一个包，返回的函数呢，就是sharedPropertyDefinition的get，所以，此后某个地方访问vm.key的时候这个闭包函数就会执行，再看一下这个函数执行的细节，第一步取得当前computed里key对应的watcher实例，然后判断watcher.dirty是否为true，这个dirty和上边提到的lazy在实例化watcher的时候用的是同一个值，在初始化所有computed的时候他们都为true，因此第一次渲染的时候，这个地方会执行到watcher.evaluate()：
Watcher.prototype.evaluate = function evaluate () {
this.value = this.get();
this.dirty = false;
};evaluate很简单，计算value，标记dirty为false，这里的get前面我们也应该讲过：他做了一件事情就是将当前watcher pushTarget，然后调用watcher实例的getter方法，getter方法就是初始化watcher的时候传进去的那个getter，那这个getter里的东西呢，我们注意到computed里一般都会访问到当前data的get方法，而前几篇讲了在get方法中，我们就能收集到当前的watcher，因此此时就会完成依赖收集。然后computed就定义完毕了。
