回顾Vue的生命周期详解，在调用_init方法初始化Vue实例时，其中一步是调用initState(vm)初始化一些状态(props、data、computed、watch、methods)，其中initData(vm)用于初始化data：
function initData(vm) { //初始化data
...
observe(data, true /* asRootData */);
}observe(data) 会将用户定义的data变成响应式的数据，它的创建过程：
export function observe (value: any, asRootData: ?boolean): Observer | void {
//不是对象类型（对象包括数组），直接返回
if (!isObject(value) || value instanceof VNode) {
return
}
let ob: Observer | void
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
} else {
ob = new Observer(value) //为`data`创建一个`Observer`实例
}
if (asRootData && ob) { //如果是根 data，ob.vmCount自增
ob.vmCount++
}
return ob
}1. 三个类
Vue实现响应式数据主要用到了三个类，首先就是Observer观察者类：
1.1 Observer 类
以用户提供的选项data(vm.$data)为例，假如当前正在调用new Observer(data)来创建一个Observer实例：
export class Observer {
value: any; //用户提供的`data`
dep: Dep;
vmCount: number; // number of vms that have this object as root $data
constructor (value: any) {
this.value = value //保存 data
this.dep = new Dep() //dep 实例
this.vmCount = 0
def(value, '__ob__', this) //用 vm.$data.__ob__ 存储当前`observer`实例
if (Array.isArray(value)) {
//如果 value 是数组，添加修改后的 mutators 方法到原型或者数组本身上面
if (hasProto) {
protoAugment(value, arrayMethods) //添加到原型上
} else {
copyAugment(value, arrayMethods, arrayKeys) //添加到数组本身
}
//遍历数组每一项，observe 每一项
this.observeArray(value)
} else {
//如果 value 是对象，遍历对象
this.walk(value)
}
}
walk (obj: Object) {
const keys = Object.keys(obj)
//遍历对象的每一个属性，将所有属性都变为响应式属性
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
observeArray (items: Array) {
//遍历数组的每一项，observe 每一项。
//并没有将任何一项变为响应式属性，因为数组是用 mutators 方法来通知更新的。
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
} 观察者在观察一个数据时，会分为对象类型和数组类型这两种情况，进行不同的操作，下面分情况讨论。
1.1.1 observe 对象类型
假如当前观察的是一个对象类型的数据obj:
const obj = {
num: 1,
str: 'a'
}如第1.1节所示，在实例化obj的Observer时，会执行obj.__ob__.walk(data)来遍历data对象，将data对象的每一个属性变成响应式属性。
假如当前正在执行defineReactive(obj, 'num')将obj.num变为响应式属性：
export function defineReactive (
obj: Object,
key: string,
val: any, //obj.num 属性对应的值
customSetter?: ?Function,
shallow?: boolean
) {
const dep = new Dep() //obj.num 属性对应的 Dep 实例
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
// 保存初始 getter/setter
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
//继续观察 obj.num 的值，形成了 observe 方法的递归调用，实现了深度遍历 data 对象
let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val //obj.num 的值
if (Dep.target) { //如果当前存在目标
dep.depend() //给 Dep.target 添加依赖 —— obj.num 属性对应的 dep（闭包中的 dep）
//如果 obj.num 的值 value 是对象或者数组类型，那么它就有观察者 value.__ob__
if (childOb) {
childOb.dep.depend() //给 Dep.target 添加依赖 —— value.__ob__.dep
//如果 value 是数组类型，就给 Dep.target 添加依赖 —— value 的每一项的 __ob__.dep
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
...
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
//观察 obj.num 的新值
childOb = !shallow && observe(newVal)
//通知更新
dep.notify()
}
})
}上面提到的依赖主要分为两种：
- 属性对应的依赖
dep（在闭包中）； - 对象的观察者的
dep属性。
需要注意的是，对象和数组最开始都是作为父对象的属性，执行过defineReactive方法的，所以它们也有闭包中的dep。对于对象类型和基本类型来说，只需用到闭包中的依赖。
而数组类型则需要用到两种依赖，让我们来看看为什么会这样。
1.1.2 observe 数组类型
回顾 Observer构造函数：
if (Array.isArray(value)) {
//如果 value 是数组，添加修改后的突变方法到原型或者数组本身上面
if (hasProto) {
value.__proto__ = arrayMethods; //将突变方法添加到原型上
} else {
copyAugment(value, arrayMethods, arrayKeys) //将突变方法添加到数组本身
}
this.observeArray(value)
}我们来看arrayMethods是一个什么样的原型：
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto) //相当于 arrayMethods = {}; arrayMethods.__proto__ = arrayProto;
//突变方法，也就是会改变数组本身的方法
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
methodsToPatch.forEach(function (method) {
//缓存初始方法
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
//调用 array.__ob__.dep.notify() 方法来通知更新
ob.dep.notify()
return result
})
})数组类型的响应式属性需要用到两种依赖：直接给数组赋一个新值，需要用闭包中的依赖来通知更新；
如果调用 mutators 方法，则需要用array.__ob__.dep依赖来通知更新。
总的来说，Vue是使用数据劫持来收集依赖和通知更新的，数据劫持的两种方法：
-
Vue3.0之前使用ES5就支持的Object.defineProperty来实现数据劫持，优点是无须polyfill，缺点是无法监听对象添加、删除属性的动作，对数组基于下标的修改、对于.length修改等； - 在
Vue3.0版本将使用es6的proxy来代替Object.defineProperty，优点是proxy的强大功能可以监听几乎所有的动作，还能支持监听Map、Set、WeakMap和WeakSet等类型的数据（简直完美），
缺点是浏览器的支持程度不及 Object.defineProperty（ ie 浏览器完全不支持 proxy）。
1.2 Dep 类
上面提到的依赖都是 Dep 类的实例，Dep类的定义如下：
let uid = 0
//Dep 实例是一个可被订阅的对象
export default class Dep {
static target: ?Watcher; //静态属性 Dep.target 表示当前目标，它是一个 Watcher 实例
id: number;
subs: Array; //订阅者数组，订阅者为 Watcher 实例
constructor () {
this.id = uid++
this.subs = []
}
addSub (sub: Watcher) {
this.subs.push(sub)
}
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
//为目标 Dep.target 收集依赖
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
//通知 subs 中的订阅者们更新
notify () {
const subs = this.subs.slice()
if (process.env.NODE_ENV !== 'production' && !config.async) {
subs.sort((a, b) => a.id - b.id)
}
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
} 当Vue的config.async为false时，会先对subs进行排序，再执行watcher.update，这是为了保证watchers订阅者们run方法的执行顺序；而如果config.async为true的话，订阅者们的run方法是在下一次事件循环执行的，而且在执行前会排一次序，所以就没必要在notify方法中排序了。
需要注意的是，Vue2.0+已经移除了Vue.config.async配置项，也就是说虽然代码中任有余留，但用户已经无法对它进行配置了，所以我们在阅读Vue源码时可以选择性忽略!config.async。
在Vue中，一个时间点只能存在一个目标Dep.target，其相关操作也是全局的：
Dep.target = null
const targetStack = [] //target 保存在栈中
//target 入栈，Dep.target 始终为栈顶 target
export function pushTarget (target: ?Watcher) {
targetStack.push(target)
Dep.target = target
}
//target 出栈，Dep.target 始终为栈顶 target
export function popTarget () {
targetStack.pop()
Dep.target = targetStack[targetStack.length - 1]
}1.3 Watcher 类
Watcher实例大致可分为三种类型：render Watcher，user Watcher和computed Watcher。
不同类型的Watcher实例，具有不同的作用，但是所有的Watcher实例都可以收集依赖。Watcher类的基本定义：
export default class Watcher {
vm: Component;
expression: string;
cb: Function;
id: number;
user: boolean; //user Watcher 的 flag
lazy: boolean; //computed Watcher 的 flag
active: boolean;
deps: Array; //Dep 数组，收集的依赖
getter: Function; //收集依赖、求值的方法
value: any;
...
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean //render Watcher 的 flag
) {
//一系列初始化操作
this.vm = vm
if (isRenderWatcher) {
vm._watcher = this //render Watcher 保存于 vm._watcher 属性
}
//vm._watchers 数组用于存储组件实例 vm 的所有 watchers
vm._watchers.push(this)
// 用户和 vue 提供的选项
if (options) {
this.deep = !!options.deep
this.user = !!options.user
...
} else {
this.deep = this.user = this.lazy = this.sync = false
}
this.cb = cb
this.id = ++uid // uid for batching
this.active = true
this.deps = []
...
if (typeof expOrFn === 'function') {
//render watcher 的 getter 通常为 updateComponent 方法，详见 Vue 的生命周期详解
this.getter = expOrFn
} else {
//初始化 user watcher 的 getter
...
}
//在构造函数的最后，执行 this.get()，首次收集依赖。所以说在 new Watcher 时，马上就会收集一次依赖。
this.value = this.lazy ? undefined : this.get()
}
//添加依赖 dep 到 newDeps 中（newDeps 用于过渡，之后会添加到 deps 中）
addDep (dep: Dep) {
const id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}
} Watcher实例主要是用原型方法get来收集依赖的：
Watcher.prototype.get = function () {
//第一步，确定目标
//pushTarget 的定义见第 1.2 节末尾，此时 Dep.target = this
pushTarget(this)
let value
const vm = this.vm
try {
//第二步，为目标收集依赖
//忽视参数 vm，执行了 this.getter() 收集依赖。对于不同类型的 watcher，它们的 getter 不尽相同
value = this.getter.call(vm, vm)
} catch (e) {
...
} finally {
...
//如第 1.2 节所示，this 出栈，此时 Dep.target = Previous Target
popTarget()
//先清空 deps，然后 deps = newDeps
this.cleanupDeps()
}
return value
}当Dep实例dep执行dep.notify方法通知订阅者更新时，每个订阅者都会执行update方法进行更新：
Watcher.prototype.update = function () {
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
this.run()
} else {
//将当前 Watcher 实例添加到队列中
queueWatcher(this)
}
}如果不是lazy或者sync类型，update方法会执行了queueWatcher(this)：
var queue = []; //存储所有组件的所有需要更新的 watcher
function queueWatcher (watcher) {
var id = watcher.id;
if (has[id] == null) {
has[id] = true;
if (!flushing) {
//如果任未执行 flushSchedulerQueue，就直接添加该 watcher
queue.push(watcher);
} else {
//如果正在执行 flushSchedulerQueue，就根据 watcher.id 将其插入 queue 中；
//如果目前已经执行到它后面的 watcher，虽然任会被插入 queue 中，但是不会在此次事件循环执行了
var i = queue.length - 1;
while (i > index && queue[i].id > watcher.id) {
i--;
}
queue.splice(i + 1, 0, watcher);
}
// queue the flush
if (!waiting) {
waiting = true
//之前就说过了，Vue2.0+ 可以忽略 !config.async，所以 waiting 同样意义不大
if (!config.async) {
flushSchedulerQueue();
return
}
//在下一事件循环执行 flushSchedulerQueue
nextTick(flushSchedulerQueue);
}
}
}flushSchedulerQueue方法会根据id排序queue中的所有watcher，然后执行它们的run方法，详见Vue源码或者Vue的生命周期详解。watcher.run方法的定义：
Watcher.prototype.run = function () {
if (this.active) {
//在 this.get 中执行 this.getter 收集依赖，并返回新的结果
const value = this.get()
if (
value !== this.value ||
// Deep watchers and watchers on Object/Arrays should fire even
// when the value is the same, because the value may have mutated.
isObject(value) ||
this.deep
) {
//缓存旧值，保存新值
const oldValue = this.value
this.value = value
if (this.user) {
//如果是 user watcher
try {
//调用 this.cb 回调
this.cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
//如果不是 user watcher，this.cb 通常为 ()=>{}
this.cb.call(this.vm, value, oldValue)
}
}
}
}2 流程
接下来我们分别分析三种Watcher实例（render Watcher、user Watcher和computed Watcher）实现响应式的原理。
2.1 render Watcher
每个组件实例有且仅有一个render Watcher，保存于vm._watcher属性中。它的主要作用是在依赖改变时重新生成组件的虚拟Dom，并更新到HTML中。
我们首先假设有如下两个文件：
main.js:
new Vue({ // 根组件
render: h => h(App)
})
---------------------------------------------------
app.vue:
{{obj.num}} // 只用了obj.num属性
export default { // app组件
name: 'app',
data() {
return {
obj: {
num: 1,
str: 'a' // 即使是响应式数据，没被使用就不会进行依赖收集
}
}
}
}回顾之前的内容，在初始化app实例时，忽视无关的步骤，会依次执行 app._init() => initState(app) => initData(app) => observe(data, true) => new Observer(data) => app.$data.__ob__.walk(data)。
其中data和app.$data都是用户提供的data选项。
回顾第1.1节，在app.$data.__ob__.walk(data)方法中会执行defineReactive方法将data对象的所有属性变成响应式属性，在这个例子中，响应式属性包括obj、obj.num和obj.str。
这样，在访问这些响应式属性时就会触发其getter方法从而收集依赖，在修改这些响应式属性的值时就会触发其setter方法从而通知更新。接下来我们看render Watcher是在什么时候收集依赖和更新的。
2.1.1 收集依赖
回顾Vue的生命周期详解，在执行mountComponent方法挂载组件时，在执行beforeMount钩子和mounted钩子之间，会实例化render Watcher：
new Watcher(vm, updateComponent, noop, {
before: function before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate');
}
}
}, true /* isRenderWatcher */);从上可以看出render Watcher的getter就是updateComponent方法。回顾第1.3节中Watcher类的构造方法，render Watcher会被存储于app._watcher中，
在构造函数的最后会执行app._watcher.get方法，此方法令 Dep.target = app._watcher并执行app._watcher.getter方法。
在执行getter方法，即updateComponent方法的过程中，会执行app._render方法：
const updateComponent = function () {
app._update(app._render(), hydrating);
};在执行app._render()时会执行app组件的render函数，在这个例子中，app 组件的 render 函数如下：
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("div", { attrs: { id: "app" } }, [
_c("div", [_vm._v(_vm._s(_vm.obj.num))]) //此处访问了 app.obj 以及 app.obj.num 属性
])
}值得注意的是，在这个过程中我们访问了app.obj以及app.obj.num属性，而且一个重要的前提是当前的目标 Dep.target = app._watcher（你在其他什么乱七八糟的地方也有可能访问app.obj.num属性，但是你没有目标的话你就无法给目标添加依赖）。
现在，我们访问了app.obj以及app.obj.num属性，那么就会调用它们的getter方法。
- 回顾第
1.1.1节，在响应式属性的getter方法中会调用dep.depend()方法。 - 回顾第
1.2节中的depend方法的定义，dep.depend()方法会为目标Dep.target添加app.obj和app.obj.num属性的依赖，也就是调用Dep.target.addDep(objDep)和Dep.target.addDep(numDep)。 - 回顾第
1.3节中的addDep方法的定义，Dep.target.addDep(dep)方法不仅会将依赖objDep和numDep添加到依赖数组Dep.target.deps中，为了保持一致，还会调用dep.addSub(Dep.target)方法。 - 回顾第
1.2节中的addSub方法的定义，dep.addSub(Dep.target)方法会将Dep.target添加到依赖objDep和numDep的订阅者数组dep.subs中。
至此，app._watcher收集依赖objDep和numDep，以及objDep和numDep收集订阅者app._watcher的过程结束。
接下来，只要app._watcher.deps中的任意依赖对应的响应式属性发生改变，就会通知app._watcher进行更新。
2.1.2 通知更新
我们假设有如下created钩子和mounted钩子：
app.vue:
export default { // app组件
data() {
...
},
created() {
this.obj.num = 2;
},
mounted() {
this.obj.num = 3;
}
}created钩子是用于混淆的，上文已经说过，render Watcher是在beforeMount钩子和mounted钩子之间实例化的，实例化时会马上收集一次依赖。所以在执行created钩子时，虽然也会执行app.obj.num属性的setter方法，但是此时它的依赖的订阅者数组subs为空，所以没有订阅者更新。
我们在mounted钩子中修改了app.obj.num属性的值，所以会调用它的setter方法。
- 回顾第
1.1.1节中的setter方法的定义，它会执行app.obj.num属性对应的依赖numDep的notify方法来通知更新。 - 回顾第
1.2节中的notify方法的定义，numDep.notify方法会依次执行numDep的订阅者数组subs中的所有watcher的update方法。在本例中，numDep.subs中只有app._watcher。 - 回顾第
1.3节中的update方法的定义，app._watcher.update方法会将app._watcher添加到队列queue中，等到下一次事件循环再执行app._watcher.run方法。 - 回顾第
1.3节中的run方法的定义，执行app._watcher.run时，会执行app._watcher.get方法。 - 回顾第
1.3节中的get方法的定义，执行app._watcher.get时，首先会确定目标，然后会执行app._watcher.getter方法（即updateComponent方法）更新组件。 - 没错，接下来又进入了收集依赖的过程。
2.2 user Watcher
user Watcher是指用户自己定义的watcher。假如用户定义了如下所示的app组件：
export default {
name: 'app', // app组件
data() {
return {
obj: {
num: 1,
str: 'a'
}
}
},
watch: {
'obj.num': {
handler(val) {
console.log(val)
}
}
},
created() {
this.$watch('obj.str', val => {...})
}
}使用watch选项或者$watch方法监听一个属性时，最终都会为该属性生成一个对应的user Watcher。
从源码来看，在调用initState(app)初始化状态时，如果有watch选项，就会调用initWatch(app, app.$options.watch)初始化watch状态，而在其中又会调用app.$watch(expOrFn, handler, options)生成一个userWatcher实例。
也就是说，watch选项中的属性其实最终也是通过$watch方法来实现监听的。而其中的过程我就不细说了，具体请看
参考链接： Vue原理解析（九）：搞懂computed和watch原理，减少使用场景思考时间
最终生成user Watcher的语句是：
const watcher = new Watcher(vm, expOrFn, cb, options)我们以obj.num属性的user Watcher为例，上述语句中的参数vm = app实例，expOrFn = 'obj.num'，cb = val => {console.log(val)}，options = {user: true}。回顾Watcher类的构造函数：
export default class Watcher {
user: boolean; //user Watcher 的 flag
value: any;
...
constructor (
vm: Component, // app
expOrFn: string | Function, // 'obj.num'
cb: Function, // val => {console.log(val)}
options?: ?Object, // {user: true}
isRenderWatcher?: boolean
) {
this.vm = vm
vm._watchers.push(this)
if (options) {
this.user = !!options.user //true，user Watcher 的 flag
...
}
this.cb = cb //val => {console.log(val)}，即用户定义的回调
...
if (typeof expOrFn === 'function') {
...
} else {
//初始化 user watcher 的 getter
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = noop
...
}
}
//在构造函数的最后，执行 this.get() 收集依赖。
this.value = this.lazy ? undefined : this.get()
}
}执行parsePath('obj.num')，来获取user Watcher的getter：
const bailRE = new RegExp(`[^${unicodeRegExp.source}.$_\\d]`)
export function parsePath (path: string): any {
//如果包含不正确的字符，直接返回
if (bailRE.test(path)) {
return
}
const segments = path.split('.')
//返回的方法就是 getter 方法
return function (obj) {
//循环赋值 obj，深度遍历路径，返回最终的结果
for (let i = 0; i < segments.length; i++) {
if (!obj) return
obj = obj[segments[i]]
}
return obj
}
}回顾第1.3节中的get方法的定义，在之后调用getter方法时会传入app实例作为实参，所以在getter方法中，刚开始obj = app；
第一次循环，obj = app.obj；第二次循环，obj = app.obj.num，最终返回 app.obj.num。
2.2.1 收集依赖
user Watcher和render Watcher收集依赖过程的区别在于watcher.getter方法不同：
-
user Watcher和render Watcher一样，会在new Watcher()的最后执行userWatcher.get方法； - 执行
userWatcher.get时，首先会确定目标Dep.target=userWatcher，然后会执行userWatcher.getter方法，传入app实例作为实参； - 观察上述
userWatcher.getter方法，可知先访问了属性app.obj，再访问了属性app.obj.num，所以会依次调用这两个属性的getter方法； - 接下来与
render Watcher收集依赖的过程类似，就不细说了。
接下来，只要userWatcher.deps中的任意依赖对应的响应式属性发生改变，就会通知userWatcher进行更新。
2.2.2 通知更新
user Watcher通知更新的过程和render Watcher略有不同，区别在于user Watcher最后会执行用户定义的回调函数。例子不变：
app.vue:
export default { // app组件
data() {
...
},
mounted() {
this.obj.num = 3;
}
}我们在mounted钩子中修改了app.obj.num属性的值，所以会调用它的setter方法。
- 在
setter方法中会调用app.obj.num属性对应的依赖numDep的notify方法来通知更新。 -
numDep.notify方法会依次执行numDep的订阅者数组subs中的所有watcher的update方法。结合上一节，目前，numDep.subs中包含userWatcher和renderWatcher这两个订阅者，其中userWatcher先生成。 -
userWatcher.update方法会将userWatcher添加到队列queue中，等到下一次事件循环再执行userWatcher.run方法。 - 执行
userWatcher.run时，首先会执行userWatcher.get方法；执行userWatcher.get时，首先会确定目标，然后会执行userWatcher.getter方法收集依赖，并且获得app.obj.num属性的新值，新值将从getter方法一直返回到run方法中。 - 回顾第
1.3节中的run方法的定义，回到run方法中后，接下来会缓存旧值，保存新值，将新值和旧值作为实参传入userWatcher.cb方法中，并执行userWatcher.cb方法，即用户定义的回调函数。
回顾Vue的生命周期详解，之所以说userWatcher比renderWatcher先生成，是因为initState(app)是在beforeCreate和created钩子之间执行的，
所以userWatcher也是在这之间实例化的；而前面已经说过，renderWatcher是在beforeMount钩子和mounted钩子之间实例化的，所以显而易见userWatcher比renderWatcher先生成。
2.3 computed Watcher(lazy Watcher)
computed Watcher是指用户定义的计算属性所对应的watcher。假如用户定义了如下所示的app组件：
export default {
name: 'app', // app组件
data() {
return {
obj: {
num: 1,
str: 'a'
}
}
},
...
computed: {
doubleNum() {
return this.obj.num * 2;
}
}
}使用computed选项定义一个计算属性时，会为该计算属性生成一个对应的computed Watcher。
从源码来看，在调用initState(app)初始化状态时，如果有computed选项，就会调用initComputed(app, app.$options.computed)初始化computed状态：
function initState (vm) {
vm._watchers = []; //app 实例的所有 watcher 的集合
var opts = vm.$options; //app 实例的选项
if (opts.props) { initProps(vm, opts.props); }
if (opts.methods) { initMethods(vm, opts.methods); }
//初始化 data
if (opts.data) {
initData(vm);
} else {
observe(vm._data = {}, true /* asRootData */);
}
//初始化 computed（先于 initWatch）
if (opts.computed) { initComputed(vm, opts.computed); }
//初始化 watch
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch);
}
}结合上一节和initState方法的定义，相信聪明的你已经发现，在不考虑$watch方法的情况下，同一组件中三种类型的watcher实例的生成顺序为：
computed Watcher => user Watcher => render Watcher。
watcher实例的生成顺序也就是它们的watcher.id的大小顺序（从小到大）。回顾Vue的生命周期详解，在下一事件循环执行flushSchedulerQueue方法时，
会根据watcher.id对queue中的watcher进行排序，然后再执行这些watcher的run方法。
所以queue中同一组件的watcher的run方法的执行顺序为（不考虑$watch生成的user Watcher和其它组件的watcher）：
user Watcher => render Watcher。
因为computed Watcher不会被加入queue中，也不是通过watcher.run方法来更新的，所以我们忽略它。而user Watcher先于render Watcher执行显然是符合我们期望的。
回归正题，在initComputed方法中：
function initComputed(vm, computed) {
const watchers = vm._computedWatchers = Object.create(null) // 创建一个纯净对象存储 computedWatchers
for(const key in computed) {
const userDef = computed[key]; //用户的定义
const getter = typeof userDef === 'function' ? userDef : userDef.get; // 计算属性 key 对应的回调函数
watchers[key] = new Watcher(vm, getter, noop, {lazy: true}) // 实例化 computed-watcher
...
}
}我们以计算属性doubleNum为例，回顾Watcher类的构造函数：
export default class Watcher {
constructor (
vm: Component, //app
expOrFn: string | Function, //用户定义的回调函数，function() { return this.obj.num * 2; }
cb: Function, //_ => {}
options?: ?Object, //{lazy: true}
isRenderWatcher?: boolean
) {
this.vm = vm
vm._watchers.push(this)
if (options) {
this.lazy = !!options.lazy // true，computed Watcher 的 flag
...
}
this.dirty = this.lazy // 表示是否需要对 computed 属性进行计算
...
if (typeof expOrFn === 'function') {
this.getter = expOrFn
}
// 不执行 this.get()
this.value = this.lazy ? undefined : this.get()
}
}实例化computed Watcher后，回到initComputed方法中：
function initComputed(vm, computed) {
...
for(const key in computed) {
const userDef = computed[key]; //用户的定义
...
if (!(key in vm)) {
defineComputed(vm, key, userDef);
} else {
if (key in vm.$data) { // key 不能和 data 里面的属性重名
warn(("The computed property \"" + key + "\" is already defined in data."), vm);
} else if (vm.$options.props && key in vm.$options.props) { // key 不能和 props 里面的属性重名
warn(("The computed property \"" + key + "\" is already defined as a prop."), vm);
}
}
}
}接下来调用defineComputed方法定义计算属性：
function defineComputed (target, key, userDef) {
//在 SSR 中，计算属性不缓存
var shouldCache = !isServerRendering();
if (typeof userDef === 'function') {
//创建计算属性的 getter，存于属性描述符中
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: createGetterInvoker(userDef);
sharedPropertyDefinition.set = noop;
}
//创建响应式的计算属性 target.key
Object.defineProperty(target, key, sharedPropertyDefinition);
}同样以计算属性app.doubleNum为例，在defineComputed方法中，首先设置了doubleNum的属性描述符(Property Descriptor)对象sharedPropertyDefinition的get和set属性，然后用Object.defineProperty方法在app实例上定义了一个属性doubleNum。
这样就为app.doubleNum属性定义了getter和setter方法，实现了数据劫持，详见MDN文档Object.defineProperty()。
2.3.1 收集依赖
在SSR中，计算属性不缓存，每次访问属性都会直接调用用户定义的回调函数，但是其他情况下会进行缓存。计算属性的缓存是通过createComputedGetter方法实现的：
function createComputedGetter (key) {
//返回计算属性的 getter
return function computedGetter () {
//首先获取刚才生成的 computedWatcher 实例
var watcher = this._computedWatchers && this._computedWatchers[key];
if (watcher) {
if (watcher.dirty) { //如果需要计算
watcher.evaluate(); //进行计算
}
if (Dep.target) { // 当前的 watcher，如果是页面渲染时触发的这个方法，Dep.target = render watcher
watcher.depend() // 将 computedWatcher 的依赖全部复制给 Dep.target
}
return watcher.value
}
}
}
---------------------------------------------------------------------------------
Watcher.prototype.evaluate = function () {
this.value = this.get() // 计算属性求值
this.dirty = false // 表示计算属性已经计算，不需要再计算
}
Watcher.prototype.depend () {
let i = this.deps.length // computedWatcher.deps 的长度
while (i--) {
this.deps[i].depend() // 收集依赖
}
}在createComputedGetter方法中对用户定义的回调函数(存于computedWatcher.getter)进行了封装，最终返回了计算属性的getter方法。
以计算属性app.doubleNum为例，在定义了它的getter方法后，当用户首次访问doubleNum属性，调用它的getter方法时，会进行第一次依赖收集：
- 在
doubleNum属性的getter方法中，首先获取相应的computedWatcher实例。回顾第2.3节中computedWatcher的实例化过程，可知computedWatcher.getter= function() { return this.obj.num * 2; } ，即用户定义的回调； - 如果属性需要进行计算，就执行
computedWatcher.evaluate方法，在其中执行computedWatcher.get方法收集依赖，并且设置计算标识dirty为false，表示已经计算过了； - 在执行
computedWatcher.get方法时，首先会确定目标Dep.target=computedWatcher，然后会执行computedWatcher.getter方法（即用户定义的回调函数）来获取计算属性的当前值； - 观察用户定义的回调函数，可知它执行时先访问了属性
app.obj，再访问了属性app.obj.num，所以会依次调用这两个响应式属性的getter方法添加依赖，添加依赖的具体步骤见第2.1.1节； - 然后回到
computedWatcher.get方法中，执行popTarget()方法，令Dep.target=Previous Target，Previous Target就是之前的watcher。
简单来说，如果用户用$watch方法监听了一个计算属性，那么在访问这个计算属性时（即调用属性的getter方法时），当前target栈为[...,userWatcher,computedWatcher]。在收集完computedWatcher的依赖之后，
就会执行popTarget()方法将computedWatcher出栈，所以当前的栈顶元素为userWatcher，Dep.target=userWatcher； - 回到
doubleNum属性的getter方法中，如果Dep.target（在computedWatcher前面的watcher）不为空，就执行computedWatcher.depend方法，该方法依次执行computedWatcher收集的依赖的depend方法； - 调用
Dep.prototype.depend方法为当前的Dep.target添加依赖，具体步骤见第2.1.1节； - 最终回到
doubleNum属性的getter方法中，返回计算属性的当前值给用户。
接下来，只要computedWatcher.deps中的任意依赖对应的响应式属性发生改变，就会通知computedWatcher进行更新。
2.3.2 通知更新
例子如下：
app.vue:
export default { // app组件
data() {
...
},
mounted() {
this.doubleNum; //先访问一次添加依赖
this.obj.num = 3;
}
}我们在mounted钩子中修改了app.obj.num属性的值，所以会调用它的setter方法。
- 在
setter方法中会调用app.obj.num属性对应的依赖numDep的notify方法来通知更新。 -
numDep.notify方法会依次执行numDep的订阅者数组subs中的所有watcher的update方法。目前，numDep.subs中包含userWatcher、renderWatcher和computedWatcher。 - 回顾第
1.3节中的update方法的定义，computedWatcher.update方法会将计算标识computedWatcher.dirty设为true，表示下一次访问该属性时需要重新进行计算。
总的来说，computed属性是一种惰性求值（延迟求值）属性，这种属性不是在被赋予表达式时求值，而是在被访问时求值。另外计算属性的值会被缓存，极大地提升了性能。
简单来说，计算属性不访问就不会计算，访问了就会计算并缓存，等依赖更新后就会将计算标识赋值为true，等下一次访问时会重新计算并缓存。
3 总结：
-
收集依赖总是从调用
watcher.get方法开始，在watcher.get方法中调用watcher.getter方法时会访问响应式属性，调用响应式属性的getter方法，从而给Dep.target添加依赖（同时给依赖添加订阅者），而调用watcher.get方法收集依赖的时机有：- for render Watcher & user Watcher:
watcher实例化时会在构造函数的最后调用watcher.get方法；watcher更新后，下一次事件循环watcher执行run方法时会调用watcher.get方法； - for computed Watcher: 首次访问计算属性，会调用计算属性的
getter方法，从而调用watcher.get方法；watcher更新后，下一次访问计算属性时会调用watcher.get方法；
- for render Watcher & user Watcher:
-
通知更新：
- 从给任意类型的响应式属性设置新值开始，调用响应式属性的
setter方法，在setter方法中调用属性所对应的依赖的notify方法，通知该依赖的所有订阅者进行更新，然后在下一次事件循环，执行所有订阅者的watcher.run方法； - 从调用数组类型的响应式属性的突变方法开始，在突变方法中调用
array.__ob__.dep依赖的notify方法，通知该依赖的所有订阅者进行更新，然后在下一次事件循环，执行所有订阅者的watcher.run方法。
- 从给任意类型的响应式属性设置新值开始，调用响应式属性的
对于render Watcher和user Watcher，再次收集依赖都是调用watcher.run方法来实现的，而watcher.run方法除了收集依赖这个副作用外，它的主要作用还有：
- for render Watcher: 在
watcher.get方法内部调用watcher.getter方法实现组件的更新（首先生成组件的VNode，然后直接进行首次渲染或者diff后进行再次渲染）； - for user Watcher: 首先在
watcher.get方法内部调用watcher.getter方法获取所监听属性的新值，然后回到watcher.run方法中，将属性的新值与旧值作为参数一起传入watcher.cb（即用户定义的回调）中并执行。