结合源码分析一下vue的响应式
之前对于响应式，只是简单，很表面上的认识，知道vue的响应式主要通过Object.defineProperty()方法来进行数据劫持以及发布者-订阅模式来实现的，但是如何进行数据劫持呢？发布订阅者模式又是什么呢？等等问题，需要明确。。。
最近花了点时间，结合源码（vue2），重新学习分析了下，在此作一下总结笔记，供个人进一步理解记忆，同时也欢迎大家阅读评论，指出问题。相关的一些笔记是在学习了黄轶老师的课程后记录的，很不错，推荐一波
先来总结一下：
vue在初始化init过程中，会对data，props中的数据进行初始化。对props初始化（initProps），主要执行了defineReactive对props中定义的数据进行响应式处理，执行proxy对数据做了代理；对data的初始化（initData），也是执行了proxy做数据代理，然后执行observe函数，对数据进行响应式化。
这个observe函数，就是创建观察者，new 一个Observer，在new这个Observer之前，会先检查是否有_ob_这个属性，是否已经对数据响应式处理过了，如果处理过了，直接取缓存，如果没有处理过，再去new Observer创建观察者。
这个Observer是一个封装好的构造函数，在这里面会处理传入的数据，如果是数组，会去遍历数组，然后对数组的每一项执行obeserve函数,如果是对象，就执行walk函数，将对象的每一个key作为参数传入defineReactive函数进行响应式处理
这个defineReactive函数就是对 Object.defineProperty的一个封装，给每一个属性加上一个getter和setter，并且在其中实例化（new Dep）一个dep对象。在getter中执行dep.depend方法做依赖收集，在setter中执行dep.notify方法做派发更新
dep.depend方法，会执行构造函数Dep中的depend方法，在depend方法中如果存在Dep.target就会执行Dep.target.addDep(this)，这个Dep.target即是当前正在处理的watcher，最后会把这个watcher保存到一个subs数组中，这就是依赖收集，收集watcher
当数据发生修改时，就会触发setter，执行dep.notify方法进行派发更新，就会遍历subs，让subs中收集的每一个watcher执行update函数，进行相对应的更新。
下面详细梳理一下
GO GO GO !!!
开始之前，我们必须清楚认识一下 Object.defineProperty( ) 这个方法，这是响应式的核心，但是这个方法不兼容ie8及以下，这也正是vue无法正常在ie8及以下使用的原因
Object.defineProperty（） 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
// 定义一个对象o
var o = {};
// 给 o 提供属性
o.age = 19;
// 等价于
Object.defineProperty(o, 'age', {
configurable: true, // 可配置的，一旦为false，就不能再设置他的（value，writable，configurable）
writable: true, // 是否可写，为false -->只读
enumerable: true, // 可枚举，遍历
value: 19 // 值
});
想要响应式，就表示在赋值和读取的时候, 附带的要做一些事情，主要在于Object.defineProperty（）的set和get方法
let _gender;
Object.defineProperty(o, 'gender', {
// 这里需要注意一个问题，set和get,不能和writable或value同时使用
configurable: true,
enumerable: true, // 可枚举
get() { // 如果使用 o.gender 来访问数据, 就会调用 get 方法 ( getter, 读取器 )
console.log('获取属性')
return _gender;
},
set(newVal) { // 如果 o.gender = 'xxx', 那么就会调用 这个 set 方法, 并设置的值会最为参数传入 set
console.log('赋值的新值为: ', newVal);
_gender = newVal;
}
});
1. 初始化
在vue初始化过程中，会对定义在data里面的数据进行初始化处理（initData)，如下
function initData (vm: Component) {
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) {
data = {}
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
)
}
// proxy data on instance
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
if (process.env.NODE_ENV !== 'production') {
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
`The data property "${key}" is already declared as a prop. ` +
`Use prop default value instead.`,
vm
)
} else if (!isReserved(key)) {
proxy(vm, `_data`, key)
}
}
// observe data
observe(data, true /* asRootData */)
}
对于initData，他主要做了两件事
一是，拿到定义的data，对data循环遍历，通过proxy函数把每一个值vm._data.xxx代理到vm.xxx上
二是，通过observe观测整个data的变化，把data里边的数据变成响应式的
另外他还做了一些判断，data如果是函数必须要return返回，data中定义的值不能和methods，props中定义的值同名，否则给出相应的警告。
下面分析一下这两件事
2. proxy函数
vue2中，封装了一个proxy，用于代理，将对某一个对象的属性访问 直接映射到 对象的某一个属性成员上
说直白点，我们定义在data中的属性，正常访问的话应该是this.data.xxx , 但是vue对此作了代理，可以通过this.xxx直接能访问到这个属性
看下源码
const sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
}
export function proxy (target: Object, sourceKey: string, key: string) {
sharedPropertyDefinition.get = function proxyGetter () {
return this[sourceKey][key]
}
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val
}
Object.defineProperty(target, key, sharedPropertyDefinition)
}
还是通过Object.defineProperty ( ),在setter和getter中做了处理
简化一下源码
function proxy( target, prop, key ) {
Object.defineProperty( target, key, {
enumerable: true,
configurable: true,
get () {
return target[ prop ][ key ];
},
set ( newVal ) {
target[ prop ][ key ] = newVal;
}
} );
}
3. observe函数
这个函数用来监测数据变化（观察者），实现响应式
还是先c来源码，为了方便理解，直接加上一些说明注释
// - 先看 对象是否含有 __ob__, 并且是 Observer 的实例 ( Vue 中响应式对象的 标记 )
// - 有, 取缓存
// - 没有, 调用 new Observer( value ), 进行响应式化
export function observe(value: any, asRootData: ?boolean): Observer | void {
if (!isObject(value) || value instanceof VNode) {
return // 判断是否为对象 判断是否为VNode的实例，如果不满足响应式的条件就跳出
}
// 观察者 创建一个ob
let ob: Observer | void
// 检测是否有缓存ob
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__ // 直接将缓存的ob拿到
} else if (
// 如果没有缓存的ob
shouldObserve && // 当前状态是否能添加观察者
!isServerRendering() && // 不是ssr（服务器端渲染）
(Array.isArray(value) || isPlainObject(value)) && // 是对象或数组
Object.isExtensible(value) && // 是否可以在它上面添加新的属性
!value._isVue // 是否是Vue实例
) {
// new 一个Observer实例 复制给ob
// 也是把value进行响应化，并返回一个ob实例，还添加了__ob__属性
ob = new Observer(value)
}
if (asRootData && ob) {
ob.vmCount++
}
// 最后返回ob，也就是一个Obesrver实例 有这个实例就有__ob__，然后其对象和数组都进行了响应化
return ob
}
observe 方法的作用就是给非 VNode 的对象类型数据添加一个观察者 Observer，
如果已经添加过，就直接返回，否则在满足一定条件下去实例化一个 Observer 对象实例（实例化一个观察者）
下面就来看一下这个 Observer 构造函数
4. Observer
同样c来源码，加上一些注释，供参考理解
export class Observer {
value: any
dep: Dep
vmCount: number // number of vms that have this object as root $data
constructor(value: any) {
this.value = value
// 这里会new一个Dep实例
this.dep = new Dep()
this.vmCount = 0
// def 用来添加__ob__属性到value对象上
def(value, '__ob__', this) // 技巧: 逻辑上等价于 value.__ob__ = this
// 响应式化的逻辑
if (Array.isArray(value)) {
// 如果是数组
// 检测当前浏览器中有没有Array.prototype
// 当能使用__proto__时
// 这里完成了数组的响应式，不使用这7个方法都不会触发响应式
// 重点: 如何进行浏览器的能力检查
if (hasProto) {
// 判断浏览器是否兼容 __prop__
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value) // 遍历数组的元素, 进行递归 observe
} else {
this.walk(value) // 遍历对象的属性, 递归 observe，walk就是给对象的所有key进行响应化
}
}
/**
* Walk through all properties and convert them into
* getter/setters. This method should only be called when
* value type is Object.
* 遍历所有属性，将其转换为getter/setters。这个方法只应该在value的类型为对象时调用
*/
walk(obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
/**
* Observe a list of Array items.
* 遍历将数组所有元素进行observe
*/
observeArray(items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}
Observer 构造函数，首先实例化Dep对象，然后通过def函数把自身实例添加到数据对象 value 的 __ob__ 属性上（这就是为什么我们在开发中，输出data中对象类型的数据时，会有一个__ob__ 属性）
这里我们看一下这个def函数，同样，def函数也是对Object.defineProperty ( )方法的一个简单的封装
export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true
})
}
Observer 构造函数中接下来，会对value 进行判断，如果是数组，会调用observeArray ( )，这个函数就是遍历数组，对数组中每一项调用observe方法；如果不是数组的话，就直接调用walk方法，遍历对象的 key 调用 defineReactive 方法
这个defineReactive ( )方法，同样是基于Object.defineProperty（）的一个封装
5. defineReactive方法
它的功能就是定义一个响应式对象，给对象动态添加 getter 和 setter
c来源码，分析一下
export function defineReactive(
obj: Object, // 对象
key: string, // 对象的key
val: any, // 监听的数据
customSetter?: ?Function, //日志函数
shallow?: boolean // 是否要添加__ob__属性
) {
// 实例化一个Dep对象
const dep = new Dep()
// 获得对象的 属性描述, 就是定义 Object.defineProperty 需要传入 对象 ( { enumerable, writable, ... } )
const property = Object.getOwnPropertyDescriptor(obj, key)
// 检测key中是否有描述符 如果是不可配置 直接返回
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
// 满足预定义的getter/setters
// 获取key中的get
const getter = property && property.get
const setter = property && property.set
// 如果getter不存在或setter存在 并且参数长度为2
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
// 递归响应式处理 给每一层属性附加一个Obeserver实例
// shallow不存在时代表没有__ob__属性 将val进行observe返回一个ob实例赋值给childOb
// 如果是对象继续调用 observe(val) 函数观测该对象从而深度观测数据对象
// walk 函数中调用 defineReactive 函数时没有传递 shallow 参数，所以该参数是 undefined
// 默认就是深度观测
let childOb = !shallow && observe(val)
// 数据拦截
// 通过Object.defineProperty对obj的key进行数据拦截
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
const value = getter ? getter.call(obj) : val // 保证了如果已经定义的 get 方法可以被继承下来, 不会丢失
if (Dep.target) {
dep.depend() // 关联的当前属性，依赖收集
/** 收集子属性 */
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter(newVal) {
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
// 如果数据没有发生变化 就不会进行派发更新
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
// #7981: for accessor properties without setter
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal) // 保证了如果已经定义的 set 方法可以被继承下来, 不会丢失
} else {
val = newVal
}
childOb = !shallow && observe(newVal) // 对新值进行响应式化
dep.notify() // 派发更新
},
})
}
defineReactive 函数最开始初始化 Dep 对象的实例，接着拿到 obj 的属性描述符，然后对子对象递归调用 observe 方法，这样就保证了无论 obj 的结构多复杂，它的所有子属性也能变成响应式的对象，这样我们访问或修改 obj 中一个嵌套较深的属性，也能触发 getter 和 setter。最后利用 Object.defineProperty 去给 obj 的属性 key 添加 getter 和 setter。
在getter中，做了依赖收集的相关处理
在setter中，实现了派发更新的逻辑，
这一块相对复杂，我们拆分来看
6. getter 依赖收集
对于依赖收集，在defineReactive 函数中需要关注两个地方，一是 在进入getter之前，通过 const dep = new Dep( ) 实例化了一个dep对象 ，二是在get函数中，通过dep.depend ( )进行依赖收集
因此，我们需要了解一下这个Dep，它是整个依赖收集的核心
还是，源码拿来
export default class Dep {
// 一个静态属性 target，这是一个全局唯一 Watcher
// 同一时间只能有一个全局的 Watcher 被计算
static target: ?Watcher
id: number
subs: Array<Watcher>
constructor() {
this.id = uid++
// 存放Watcher对象的数组
this.subs = []
}
addSub(sub: Watcher) {
// 给subs数组添加一个Watcher对象
this.subs.push(sub)
}
removeSub(sub: Watcher) {
// 删除watcher对象
remove(this.subs, sub)
}
// 添加watcher
depend() {
// target就是Watcher dep就是dep对象，dep中是否有watcher对象
if (Dep.target) {
// 用当前的watcher调用addDep
Dep.target.addDep(this)
}
}
/**
* 每一个属性 都会包含一个 dep 实例
* 这个 dep 实例会记录下 参与计算或渲染的 watcher
*/
// 通知所有watcher对象更新视图，也就是执行update
notify() {
// stabilize the subscriber list first
// 浅拷贝一份subs数组，也就是Watchers列表
const subs = this.subs.slice()
if (process.env.NODE_ENV !== 'production' && !config.async) {
// subs aren't sorted in scheduler if not running async
// we need to sort them now to make sure they fire in correct
// order
// 如果不运行async，则不会在调度程序中对sub进行排序
// 我们现在需要对它们进行分类以确保它们发射正确秩序
subs.sort((a, b) => a.id - b.id)
}
// 所有subs中的wathcers执行update函数，也就是更新
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
// The current target watcher being evaluated.
// This is globally unique because only one watcher
// can be evaluated at a time.
// 正在评估的当前目标观察程序。
// 这是全局的的，因为只有一个观察者，可以在任何时候都被评估。
Dep.target = null
const targetStack = []
// 压栈
export function pushTarget(target: ?Watcher) {
// 压栈
targetStack.push(target)
// target就是watcher dep是Dep对象
Dep.target = target
}
export function popTarget() {
// 出栈
targetStack.pop()
// 成为最后一个元素
Dep.target = targetStack[targetStack.length - 1]
}
Dep 是一个 Class，它定义了一些属性和方法，这里需要特别注意的是它有一个静态属性 target，这是一个全局唯一 Watcher，这是一个非常巧妙的设计，因为在同一时间只能有一个全局的 Watcher 被计算，另外它的自身属性 subs 也是 Watcher 的数组。
Dep 实际上就是对 Watcher 的一种管理，Dep 脱离 Watcher 单独存在是没有意义的，为了完整搞清楚依赖收集过程，我们有必要看一下 Watcher 的一些相关实现
let uid = 0
/**
* A watcher parses an expression, collects dependencies,
* and fires callback when the expression value changes.
* This is used for both the $watch() api and directives.
*/
export default class Watcher {
vm: Component;
expression: string;
cb: Function;
id: number;
deep: boolean;
user: boolean;
computed: boolean;
sync: boolean;
dirty: boolean;
active: boolean;
// 在 Vue 中使用了 二次提交的概念
// 每次在数据 渲染 或 计算的时候 就会访问响应式的数据, 就会进行依赖收集
// 就将关联的 Watcher 与 dep 相关联,
// 在数据发生变化的时候, 根据 dep 找到关联的 watcher, 依次调用 update
// 执行完成后会清空 watcher
dep: Dep;
deps: Array<Dep>;
newDeps: Array<Dep>;
depIds: SimpleSet;
newDepIds: SimpleSet;
before: ?Function;
getter: Function;
value: any;
constructor (
vm: Component, // dom
expOrFn: string | Function, //获取值的函数，或是更新视图的函数
cb: Function, // 回调函数
options?: ?Object, // 参数
isRenderWatcher?: boolean // 是否是渲染过的watcher
) {
this.vm = vm
if (isRenderWatcher) { // 如果是已经渲染过的watcher
vm._watcher = this // 把当前Watcher对象给_wathcer
}
vm._watchers.push(this) // 把观察者添加到队列里面 当前Watcher添加到vue实例上
// options
if (options) {
this.deep = !!options.deep
this.user = !!options.user
this.computed = !!options.computed
this.sync = !!options.sync
this.before = options.before
} else {
this.deep = this.user = this.computed = this.sync = false
}
this.cb = cb
this.id = ++uid // uid for batching
this.active = true
this.dirty = this.computed // for computed watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
// parse expression for getter
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = function () {}
process.env.NODE_ENV !== 'production' && warn(
`Failed watching path: "${expOrFn}" ` +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
)
}
}
if (this.computed) {
this.value = undefined
this.dep = new Dep()
} else {
this.value = this.get()
}
}
/**
* Evaluate the getter, and re-collect dependencies.
*/
get () {
pushTarget(this) // 实际上就是把 Dep.target 赋值为当前的渲染 watcher 并压栈（为了恢复用）
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm) // this.getter 对应就是 updateComponent 函数,这实际上就是在执行 vm._update(vm._render(), hydrating)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value)
}
popTarget()
this.cleanupDeps()
}
return value
}
/**
* Add a dependency to this directive.
*/
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)
}
}
}
/**
* Clean up for dependency collection.
*/
cleanupDeps () {
let i = this.deps.length
while (i--) {
const dep = this.deps[i]
if (!this.newDepIds.has(dep.id)) {
dep.removeSub(this)
}
}
let tmp = this.depIds
this.depIds = this.newDepIds
this.newDepIds = tmp
this.newDepIds.clear()
tmp = this.deps
this.deps = this.newDeps
this.newDeps = tmp
this.newDeps.length = 0
}
// ...
}
Watcher 是一个 Class，在它的构造函数中，定义了一些和 Dep 相关的属性：
this.deps = [] // 观察者队列
this.newDeps = [] // 新的观察者队列
this.depIds = new Set() // depId 不可重复
this.newDepIds = new Set() // 新depId 不可重复
其中，this.deps 和 this.newDeps 表示 Watcher 实例持有的 Dep 实例的数组；而 this.depIds 和 this.newDepIds 分别代表 this.deps 和 this.newDeps 的 id ，Set（这个 Set 是 ES6 的数据结构）
除此之外，Watcher 还定义了一些原型的方法，和依赖收集相关的有 get、addDep 和 cleanupDeps 方法
7. 依赖收集的过程分析
对数据对象的访问会触发他们的 getter 方法，那么这些对象什么时候被访问呢？
这里举种情况，当我们去实例化一个渲染 watcher 的时候，
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
首先进入 watcher 的构造函数逻辑，然后会执行它的 this.get() 方法，进入 get 函数，首先会执行pushTarget方法
export function pushTarget(target: ?Watcher) {
targetStack.push(target)
Dep.target = target
}
实际上就是把 Dep.target 赋值为当前的渲染 watcher 并压栈（为了恢复用）。接着又执行了
value = this.getter.call(vm, vm)
this.getter 对应就是 updateComponent 函数，这实际上就是在执行
vm._update(vm._render(), hydrating)
它会先执行 vm._render() 方法，这个方法会生成 渲染 VNode，并且在这个过程中会对 vm 上的数据访问，这个时候就触发了数据对象的 getter。
那么每个对象值的 getter 都持有一个 dep，在触发 getter 的时候会调用 dep.depend() 方法，也就会执行 Dep.target.addDep(this)。
刚才我们提到这个时候 Dep.target 已经被赋值为渲染 watcher，那么就执行到 addDep 方法：
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)
}
}
}
这时候会做一些逻辑判断（保证同一数据不会被添加多次）后执行 dep.addSub(this)，那么就会执行 this.subs.push(sub)，也就是说把当前的 watcher 订阅到这个数据持有的 dep 的 subs 中，这个目的是为后续数据变化时候能通知到哪些 subs 做准备
所以在 vm._render() 过程中，会触发所有数据的 getter，这样实际上已经完成了一个依赖收集的过程。
8. setter派发更新
setter 的逻辑有 2 个关键的点，一个是 childOb = !shallow && observe(newVal)，如果 shallow 为 false 的情况，会对新设置的值变成一个响应式对象；另一个是 dep.notify()，通知所有的订阅者
class Dep {
// ...
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
这里的逻辑非常简单，遍历所有的 subs，也就是 Watcher 的实例数组，然后调用每一个 watcher 的 update 方法
update () {
/* istanbul ignore else */
if (this.computed) {
// A computed property watcher has two modes: lazy and activated.
// It initializes as lazy by default, and only becomes activated when
// it is depended on by at least one subscriber, which is typically
// another computed property or a component's render function.
if (this.dep.subs.length === 0) {
// In lazy mode, we don't want to perform computations until necessary,
// so we simply mark the watcher as dirty. The actual computation is
// performed just-in-time in this.evaluate() when the computed property
// is accessed.
this.dirty = true
} else {
// In activated mode, we want to proactively perform the computation
// but only notify our subscribers when the value has indeed changed.
this.getAndInvoke(() => {
this.dep.notify()
})
}
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
}
这里对于 Watcher 的不同状态，会执行不同的逻辑，在一般组件数据更新的场景，会走到最后一个 queueWatcher(this) 的逻辑
const queue: Array<Watcher> = []
let has: { [key: number]: ?true } = {}
let waiting = false
let flushing = false
/**
* Push a watcher into the watcher queue.
* Jobs with duplicate IDs will be skipped unless it's
* pushed when the queue is being flushed.
*/
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let 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
nextTick(flushSchedulerQueue)
}
}
}
这里引入了一个队列的概念，这也是 Vue 在做派发更新的时候的一个优化的点，它并不会每次数据改变都触发 watcher 的回调，而是把这些 watcher 先添加到一个队列里，然后在 nextTick 后执行 flushSchedulerQueue。
这里有几个细节要注意一下，首先用 has 对象保证同一个 Watcher 只添加一次；最后通过 waiting 保证对 nextTick(flushSchedulerQueue) 的调用逻辑只有一次，并在下一个 tick，也就是异步的去执行 flushSchedulerQueue。
let flushing = false
let index = 0
/**
* Flush both queues and run the watchers.
*/
function flushSchedulerQueue () {
flushing = true
let watcher, id
// Sort queue before flush.
// This ensures that:
// 1. Components are updated from parent to child. (because parent is always
// created before the child)
// 2. A component's user watchers are run before its render watcher (because
// user watchers are created before the render watcher)
// 3. If a component is destroyed during a parent component's watcher run,
// its watchers can be skipped.
// 刷新前对队列排序
// 这样可以确保：
// 1. 组件从父级更新到子级。（因为父对象总是在子对象之前创建）
// 2. 组件的用户观察程序在其渲染观察程序之前运行（因为用户观察程序是在渲染观察程序之前创建的）
// 3. 如果某个组件在父组件的观察程序运行期间被破坏，则可以跳过它的观察程序。
// 刷新前对队列进行排序 根据id排序
queue.sort((a, b) => a.id - b.id)
// do not cache length because more watchers might be pushed
// as we run existing watchers
// 当我们运行现有的观察者时，不要缓存长度，因为可能会推送更多观察者
// 遍历观察者数组
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
if (watcher.before) {
watcher.before()
}
id = watcher.id
has[id] = null
watcher.run()
// in dev build, check and stop circular updates.
if (process.env.NODE_ENV !== 'production' && has[id] != null) {
circular[id] = (circular[id] || 0) + 1
if (circular[id] > MAX_UPDATE_COUNT) {
warn(
'You may have an infinite update loop ' + (
watcher.user
? `in watcher with expression "${watcher.expression}"`
: `in a component render function.`
),
watcher.vm
)
break
}
}
}
// keep copies of post queues before resetting state
const activatedQueue = activatedChildren.slice()
const updatedQueue = queue.slice()
resetSchedulerState()
// call component updated and activated hooks
callActivatedHooks(activatedQueue)
callUpdatedHooks(updatedQueue)
// devtool hook
/* istanbul ignore if */
if (devtools && config.devtools) {
devtools.emit('flush')
}
}
这里有几个重要的逻辑要梳理一下
queue.sort((a, b) => a.id - b.id) 对队列做了从小到大的排序，这么做主要有以下要确保以下几点：
1.组件的更新由父到子；因为父组件的创建过程是先于子的，所以 watcher 的创建也是先父后子，执行顺序也应该保持先父后子。
2.用户的自定义 watcher 要优先于渲染 watcher 执行；因为用户自定义 watcher 是在渲染 watcher 之前创建的。
3.如果一个组件在父组件的 watcher 执行期间被销毁，那么它对应的 watcher 执行都可以被跳过，所以父组件的 watcher 应该先执行。
在对 queue 排序后，接着就是要对它做遍历，拿到对应的 watcher，执行 watcher.run()。这里需要注意一个细节，在遍历的时候每次都会对 queue.length 求值，因为在 watcher.run() 的时候，很可能用户会再次添加新的 watcher，这样会再次执行到 queueWatcher，如下：
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// ...
}
}
可以看到，这时候 flushing 为 true，就会执行到 else 的逻辑，然后就会从后往前找，找到第一个待插入 watcher 的 id 比当前队列中 watcher 的 id 大的位置。把 watcher 按照 id的插入到队列中，因此 queue 的长度发生了变化。
这个过程就是执行 resetSchedulerState 函数
const queue: Array<Watcher> = []
let has: { [key: number]: ?true } = {}
let circular: { [key: number]: number } = {}
let waiting = false
let flushing = false
let index = 0
/**
* Reset the scheduler's state.
*/
function resetSchedulerState () {
index = queue.length = activatedChildren.length = 0
has = {}
if (process.env.NODE_ENV !== 'production') {
circular = {}
}
waiting = flushing = false
}
把这些控制流程状态的一些变量恢复到初始值，把 watcher 队列清空。
接下来我们继续分析 watcher.run() 的逻辑
class Watcher {
/**
* Scheduler job interface.
* Will be called by the scheduler.
*/
run () {
if (this.active) {
this.getAndInvoke(this.cb)
}
}
getAndInvoke (cb: Function) {
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
) {
// set new value
const oldValue = this.value
this.value = value
this.dirty = false
if (this.user) {
try {
cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
cb.call(this.vm, value, oldValue)
}
}
}
}
run 函数实际上就是执行 this.getAndInvoke 方法，并传入 watcher 的回调函数。getAndInvoke 函数逻辑也很简单，先通过 this.get() 得到它当前的值，然后做判断，如果满足新旧值不等、新值是对象类型、deep 模式任何一个条件，则执行 watcher 的回调，注意回调函数执行的时候会把第一个和第二个参数传入新值 value 和旧值 oldValue，这就是当我们添加自定义 watcher 的时候能在回调函数的参数中拿到新旧值的原因。
那么对于渲染 watcher 而言，它在执行 this.get() 方法求值的时候，会执行 getter 方法：
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
所以这就是当我们去修改组件相关的响应式数据的时候，会触发组件重新渲染的原因，接着就会重新执行 patch 的过程
综上，当数据发生变化的时候，触发 setter 逻辑，把在依赖过程中订阅的的所有观察者，也就是 watcher，都触发它们的 update 过程，这个过程又利用了队列做了进一步优化，在 nextTick 后执行所有 watcher 的 run，最后执行它们的回调函数。
