前段时间把 vue源码抽时间看了一遍，耐心点看再结合网上各种分析文章还是比较容易看明白的，没太大问题，唯一的问题就是
看完即忘
当然了，也不是说啥都不记得了，大概流程以及架构这些东西还是能留下个印象的，对于 Vue的构建算是有了个整体认知，只是具体到代码级别的细节很难记住多少，不过也情有可原嘛，又不是背代码谁能记住那么多逻辑绕来绕去的东西？
不过嘛，如果能加深对这些细节的印象那也是最好不过了，于是就决定写几篇文章吧，但不可能从头到尾把 Vue全写一遍，太多了也没那时间，想来想去，响应式这个东西几年前就已经被列入《三年前端，五年面试》考试大纲，那就它吧
本文以
vue@^2.6.6进行分析
初始化
首先找入口，vue源码的src目录下，存放的就是未打包前的代码，这个目录下又分出几个目录：
compiler跟模板编译相关，将模板编译成语法树，再将 ast编译成浏览器可识别的 js代码，用于生成 DOM
core就是 Vue的核心代码了，包括内置组件(slot、transition等)，内置 api的封装(nextTick、set等)、生命周期、observer、vdom等
platforms跟跨平台相关，vue目前可以运行在web和 weex上，这个目录里存在的文件用于抹平平台间的 api差异，赋予开发者无感知的开发体验
server存放跟服务器渲染(SSR)相关的逻辑
sfc，缩写来自于 Single File Components，即 单文件组件，用于配合 webpack解析 .vue文件，由于我们一般会将单个组件的 template、script、style，以及自定义的 customBlocks写在一个单 .vue文件中，而这四个都是不同的东西，肯定需要在解析的时候分别抽离出来，交给对应的处理器处理成浏览器可执行的 js文件
share定义一些客户端和服务器端公用的工具方法以及常量，例如生命周期的名称、必须的 polyfill等
其他的就废话不多说了，直接进入主题，数据的响应式肯定是跟 data 以及 props有关，所以直接从 data以及 props的初始化开始
node_modules\vue\src\core\instance\state.js文件中的 initState方法用于对 props、data、methods等的初始化工作，在 new vue的时候，会调用 _init方法，此方法位于 Vue的原型 Vue.prototype上，这个方法就会调用 initState
// node_modules\vue\src\core\instance\index.js
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}
// 往 Vue构造函数的 prototyp上挂载 _init方法
initMixin(Vue)
复制代码// node_modules\vue\src\core\instance\init.js
export function initMixin (Vue: ClassinitState方法如下：
// node_modules\vue\src\core\instance\state.js
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
复制代码可见，在此方法中，分别调用了 initProps、initMethods、initData、initComputed、initWatch方法，这些方法中对 props、methods、data、computed、watch进行了初始化过程，本文只是分析响应式，所以其他抛开不谈，只看 initProps 和 initData
initProps中，主要是使用了一个 for...in对 props进行遍历，调用 defineReactive方法将每个 props值变成响应式的值defineReactive正是 vue响应式的核心方法，放到后面再说；
并且又调用 proxy方法把这些 props值代理到 vue上，这样做的目的是能够让直接访问 vm.xxx 得到和访问 vm._props.xxx同样的效果（也就是代理了）
上面的意思具体点就是，你定义在
props中的东西（比如：props: { a； 1 }），首先会被附加到vm._props对象的属性上(即vm._props.a)，然后遍历vm._props，对其上的属性进行响应式处理（对a响应式处理），但是我们一般访问props并没有看到过什么this._props.a的代码，而是直接this.a就取到了，原因就在于vue内部已经为我们进行了一层代理首先附加在
vm._props上的目的是方便vue内部的处理，只要是挂载vm._props上的数据就都是props而不是data或watch什么的，而代理到vm上则是方便开发者书写
// node_modules\vue\src\core\instance\state.js
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)
}
复制代码proxy方法的原理其实就是使用 Object.defineProperty的 get 和 set方法代理了属性的访问
最后，这里面还有个 toggleObserving方法，这个方法是 vue内部对逻辑的一个优化，如果当前组件是根组件，那么根组件是不应该有 props的，但是呢，你给根组件加个 props，vue也不会报错，子组件的 props可以由父元素改变，但是根组件是没有父组件的，所以很显然根组件的 props肯定是不会改变的，也就没必要对这种 props进行依赖收集了
这里调用 toggleObserving就是禁止掉根组件 props的依赖收集
initData里做的事情跟 initProps差不多，首先，会把 data值取出放到 vm._data上，由于data的类型可以是一个对象也可以是一个函数，所以这里会判断下，如果是函数则调用 getData方法获取 data对象，否则直接取 data的值即可，不传 data的话，默认 data值是空对象 {}
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
复制代码这个 getData其实就是执行了传入的 function类型的data，得到的值就是对象类型的 data
export function getData (data: Function, vm: Component): any {
// ...
// 使用 call执行 function类型的data，得到对象类型的data
return data.call(vm, vm)
// ...
}
复制代码另外，initData并没有直接对 data进行遍历以将 data中的值都变成是响应式的，而是另外调用 observe方法来做这件事，observe最终也调用了 defineReactive，但是在调用之前，还进行了额外的处理，这里暂时不说太多，放到后面和 defineReactive一起说；除此之外，initData也调用了 proxy进行数据代理，作用和 props调用 proxy差不多，只不过其是对 data数据进行代理
构建 Observe
现在回到上面没说的 observe 和 defineReactive，由于 observe最终还是会调用 defineReactive，所以就直接从 observe说起
observe，字面意思就是观察、观测，其主要功能就是用于检测数据的变化，由于其属于响应式，算是 vue的一个关键核心，所以其专门有一个文件夹，用于存放相关逻辑文件
// node_modules\vue\src\core\observer\index.js
export function observe (value: any, asRootData: ?boolean): Observer | void {
/// ...
{
ob = new Observer(value)
}
/// ...
}
复制代码observe方法中，主要是这一句 ob = new Observer(value)，这个 Observer是一个 class类
// node_modules\vue\src\core\observer\index.js
export class Observer {
// ...
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
this.walk(value)
}
}
// ...
}
复制代码在其 constructor中，做了一些事情，这里的 new Dep()的 Dep也是跟响应式相关的一个东西，后面再说，然后调用了 def，这个方法很简单，就是调用 Object.defineProperty将当前实例（this）添加到value的 __ob__属性上：
// node_modules\vue\src\core\util\lang.js
export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true
})
}
复制代码vue里很多地方都用到了 Object.defineProperty，可以看出这个东西对于 vue来说还是很重要的，少了它会很麻烦，而 IE8却不支持 Object.defineProperty，所以 Vue不兼容 IE8也是有道理的
在前面的 observe方法中，也出现过 __ob__这个东西：
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
}
复制代码可以看到，__ob__在这里用于做重复校验，如果当前数据对戏 value上已经有了 __ob__属性并且此属性是由 Observer构造而来，则直接返回这个值，避免重复创建
回到 Observer类，接下里会判断 value是不是数组，如果是数组，再判断 hasProto是否为 truth值，这个 hasProto就是用于检测当前浏览器是否支持使用 __proto__的：
// node_modules\vue\src\core\util\env.js
// can we use __proto__?
export const hasProto = '__proto__' in {}
复制代码如果是就调用 protoAugment，否则调用 copyAugment，后者可以看做是前者兼容 __proto__的一个 polyfill，这两个方法的目的是一样的，都是用于改写 Array.prototype上的数组方法，以便让数组类型的数据也具备响应式的能力
换句话说，数组为什么对数组的修改，也能触发响应式呢？原因就在于 vue内部对一些常用的数组方法进行了一层代理，对这些数组方法进行了修改，关键点在于，在调用这些数组方法的时候，会同时调用 notify方法：
// node_modules\vue\src\core\observer\array.js
// notify change
ob.dep.notify()
复制代码ob就是 __ob__，即数据对象上挂载的自身的观察者，notify就是观察者的通知事件，这个后面放到 defineReactive一起说，这里调用 notify告诉 vue数据发生变化，就触发了页面的重渲染，也就相当于是数组也有了响应式的能力
完了之后，继续调用 observeArray进行深层便利，以保证所有嵌套数据都是响应式的
接上面，如果是对象的话就无需那么麻烦，直接调用 this.walk方法：
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
复制代码walk方法会对传入的对象进行遍历，然后对每一个遍历到的数据调用 defineReactive方法，终于到这个方法了，无论是 props的初始化还是 data的初始化最后都会调用这个方法，前面那些都是一些差异性的分别处理
大概看一眼 defineReactive这个方法，最后调用的 Object.defineProperty很显眼，原来是在这个函数中修改了属性的 get 以及 set，这两个方法很重要，分别对应所谓的 依赖收集 和 派发更新
先上个上述所有流程的简要示意图，有个大体印象，不然说得太多容易忘
依赖收集
先看 get
// node_modules\vue\src\core\observer\index.js
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
}
复制代码首先，如果当前属性以及显式定义了 get方法，则执行这个 get获取到值，接着判断 Dep.target
这里又出现了一个新的东西： Dep，这是一个 class类，比较关键，是整个依赖收集的核心
// node_modules\vue\src\core\observer\dep.js
// 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)
Dep.target = target
}
export function popTarget () {
targetStack.pop()
Dep.target = targetStack[targetStack.length - 1]
}
复制代码进入 Dep的定义，此类的静态属性 target初始化的值是 null，但是可以通过两个暴露出去的方法来修改这个值
另外，在 Dep.target = null的上面还有一段注释，主要是说由于同一时间只能有一个 watcher被执行(当前执行完了再进行下一个)，而这个 Dep.target的指向就是这个正在执行的 watcher，所以 Dep.target就应该是全局唯一的，这也正是为什么 target是个静态属性的原因
那么现在由于 Dep.target是 null，不符合 if(Dep.target){}，所以这个值肯定在什么地方被修改了，而且应该是通过 pushTarget 或 popTarget来修改的
所以什么地方会调用这两个方法？
这又得回到 get了，什么时候会调用 get？访问这个属性，也就是数据的时候就会调用这个数据的 get(如果有的话)，什么时候会访问数据呢？当然是在渲染页面的时候，肯定需要拿到数据来填充模板
那么这就是生命周期的事了，这个过程应该发生在 beforeMount 和 mount中间
// node_modules\vue\src\core\instance\lifecycle.js
// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
复制代码主要是 new Watcher这句代码，as we all konw，vue 使用观察者模式实现响应式逻辑，前面的 Observe是监听器，那么这里的 Watcher就是观察者，数据的变化会被通知给 Watcher，由 Watcher进行视图更新等操作
进入 Watcher方法
其构造函数 constructor的最后：
this.value = this.lazy
? undefined
: this.get()
复制代码this.lazy是传入的修饰符，暂时不用管，这里可以认为直接调用 this.get()
get () {
pushTarget(this)
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} 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
}
复制代码可以看到，在 Watcher的 get方法中，上来就调用了 pushTarget方法，所以就把当前这个 watcher push到 targetStack(位于 Dep的定义文件中)数组中去了，并且把 Dep.target的值置为这个 watcher
所以，从这里可以看出 targetStack数组的作用就是类似于一个栈，栈内的项就是 watcher
try...catch...finally的 finally语句中，首先根据 this.deep来决定是否触发当前数据子属性的 getter，这里暂时不看，然后就是调用 popTarget，这个方法就是将当前 watcher出栈，并将 Dep.target指向上一个 watcher
然后 this.cleanupDeps()其实就是依赖清空，因为已经实现了对当前 watcher的依赖收集，Dep.target已经指向了其他的 watcher，所以当前 watcher的订阅就可以取消了，腾出空间给其他的依赖收集过程使用
接着执行 value = this.getter.call(vm, vm)，这里的 this.getter就是：
// node_modules\vue\src\core\instance\lifecycle.js
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
复制代码_update 和 _render都是挂载在 Vue.prototype上的方法，跟组件更新相关，vm._render方法返回一个 vnode，所以肯定涉及到数据的访问，不然怎么构建 vnode，既然访问数据，那么就会调用数据的 get方法(如果有的话)
那么就又回到前面了：
// node_modules\vue\src\core\observer\index.js
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
}
复制代码经过上面 Watcher的构建过程，可以知道这个时候 Dep.target其实的指向已经已经被更正为当前的 watcher了，也就是 trueth值，可以进入条件语句
首先执行 dep.depend()，dep是在 defineReactive方法中 new Dep的实例，那么看下 Dep的 depend方法
// node_modules\vue\src\core\observer\dep.js
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
复制代码Dep.target此时条件成立，所以继续调用 Dep.target上的 addDep方法，Dep.target指向 Watcher，所以看 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)
}
}
}
复制代码首先通过 id避免重复添加同一数据，最后又调用了 dep.addSub将当前 Watcher添加到 Dep中去
这里出现了几个变量，newDepIds、newDeps、depIds、deps，这几个变量其实就是在 Dep添加 watcher之前的一次校验，以及方便后续移除订阅，提升 vue的性能，算是 vue内部一种优化策略，这里不用理会
// node_modules\vue\src\core\observer\dep.js
addSub (sub: Watcher) {
this.subs.push(sub)
}
复制代码最终，在 Dep中，会把 watcher push到 Dep的 subs数组属性中
即，最终 props和 data的响应式数据的 watcher都将放到 Dep的 subs中，这就完成了一次依赖收集的过程
继续回到 defineReactive，在调用了 dep.depend()之后，还有几行代码：
// node_modules\vue\src\core\observer\index.js
let childOb = !shallow && observe(val)
// ...
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
复制代码递归调用 observe，保证子属性也是响应式的，如果当前值是数组，那么保证这个数组也是响应式的
这个依赖收集过程，简要示意图如下：
派发更新
依赖收集的目的就是将所有响应式数据通过 watcher收集起来统一管理，当数据发生变化的时候，就通知视图进行更新，这个更新的过程就是派发更新
继续看 defineReactive的 set方法，这个方法实现派发更新的主要逻辑
// node_modules\vue\src\core\observer\index.js
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
// #7981: for accessor properties without setter
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
dep.notify()
}
复制代码首先是一系列的验证判断，可以不用管，然后设置数据的值为传入的值，这是一般 set函数都会执行的方法
然后到 childOb = !shallow && observe(newVal)，一般情况下，shallow都是 trueth值，所以会调用 observe，经过上面的分析，我们知道这个 observe就是依赖收集相关的东西，这里的意思就是对新设置的值也进行依赖收集，加入到响应式系统中来
接下来这行代码才是关键：
dep.notify()
复制代码看下 Dep：
// node_modules\vue\src\core\observer\dep.js
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
// ...
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
复制代码notify方法中，遍历了 subs，对每个项调用 update方法，经过前面的分析我们知道，subs的每个项其实都是依赖收集起来的 watcher，这里也就是调用了 watcher的 update方法，通过 update来触发对应的 watcher实现页面更新
所以，Dep其实就是一个 watcher管理模块，当数据变化时，会被 Observer监测到，然后由 Dep通知到 watcher
update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
}
复制代码this.lazy 跟 computed相关，computed是惰性求值的，所以这里只是把 this.dirty设为 true，并没有做什么更新的操作；
this.sync跟 watch相关，如果 watch设置了这个值为 true，则是显式要求 watch更新需要在当前 Tick 一并执行，不必放到下一个 Tick
这两个暂时不看，不扩充太多避免逻辑太乱，正常流程会执行 queueWatcher(this)
// node_modules\vue\src\core\observer\scheduler.js
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
if (process.env.NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
nextTick(flushSchedulerQueue)
}
}
}
复制代码queueWatcher首先会根据 has[id]来避免同一 watcher的重复添加，接下来引入了队列的概念，vue并不会在每次数据改变的时候就立即执行 watcher重渲染页面，而是把这些 watcher 先推送到一个队列里，然后在nextTick 里调用 flushSchedulerQueue批量执行这些 watcher，更新 DOM
这里在 nextTick里执行 flushSchedulerQueue的目的就是为了要等到当前 Tick中所有的 watcher都加入到 queue中，再在下一 Tick中执行队列中的 watcher
看下这个 flushSchedulerQueue方法，首先对队列中的 watcher根据其 id进行排序，将 id小的 watcher放在前面(父组件 watcher的 id小于子组件的)， 排序的目的也已经在注释中解释地很清楚了：
// node_modules\vue\src\core\observer\scheduler.js
// 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.
queue.sort((a, b) => a.id - b.id)
复制代码大概意思就是，在清空队列之前对队列进行排序，主要是为了以下 3点
-
组件的更新是由父到子的（因为父组件的创建在子组件之前），所以
watcher的创建也应该是先父后子，执行顺序也应该保持先父后子 -
用户自定义
watcher应该在 渲染watcher之前执行（因为用户自定义watcher的创建在 渲染watcher之前） -
如果一个组件在父组件的
watcher执行期间被销毁，那么这个子组件的watcher都可以被跳过
排完序之后，使用了一个 for循环遍历队列，执行每个 watcher的 run方法，那么就来看下这个 run方法
// node_modules\vue\src\core\observer\watcher.js
run () {
if (this.active) {
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
if (this.user) {
try {
this.cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
this.cb.call(this.vm, value, oldValue)
}
}
}
}
复制代码首先判断 this.active，这个 this.active的初始值是 true，那么什么时候会变成 false呢？当 watcher从所有 Dep中移除的时候，也就是这个 watcher移除掉了，所以也就没有什么派发更新的事情了
// node_modules\vue\src\core\observer\watcher.js
teardown () {
// ...
this.active = false
}
复制代码接着执行 const value = this.get()获取到当前值，调用 watcher的 get方法的时候会执行 watcher的 getter方法：
// node_modules\vue\src\core\observer\watcher.js
get () {
pushTarget(this)
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} catch (e) {
// ...
}
// ...
return value
}
复制代码而这个 getter前面已经说了，其实就是：
// node_modules\vue\src\core\instance\lifecycle.js
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
复制代码也就是执行了 DOM更新的操作
回到 flushSchedulerQueue，在执行完 watcher.run()之后，还有些收尾工作，主要是执行了 resetSchedulerState方法
// node_modules\vue\src\core\observer\scheduler.js
function resetSchedulerState () {
index = queue.length = activatedChildren.length = 0
has = {}
if (process.env.NODE_ENV !== 'production') {
circular = {}
}
waiting = flushing = false
}
复制代码这个方法主要是用于重置队列状态，比如最后将 waiting、flushing置为 false，这样一来，当下次调用 queueWatcher的时候，就又可以往 queue队列里堆 watcher了
回到 queueWatcher这个方法
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)
}
复制代码当 flushSchedulerQueue执行，进行批量处理 watcher的时候，flushing将被置为 true，这个时候如果再次添加新的 user watcher进来，那么就会立即添加到 queue中去
这里采取改变 queue的方式是原数组修改，也就是说添加进去的 watcher会立即加入到 flushSchedulerQueue批处理的进程中，因而在 flushSchedulerQueue中对 queue的循环处理中，for循环是实时获取 queue的长度的
// node_modules\vue\src\core\observer\scheduler.js
function flushSchedulerQueue () {
// ...
for (index = 0; index < queue.length; index++) {
// ...
}
// ...
}
复制代码另外，新加入的 watcher加到 queue的位置也是根据id进行排序的，契合上面所说的 watch执行先父后子的理念
大体流程示意图如下：
总结
vue的代码相比于 react的其实还是挺适合阅读的，我本来还打算打断点慢慢看，没想到根本没用到，这也表明了vue的轻量级确实是有原因的
少了各种模式和各种系统的堆砌，但同时又能满足一般业务的开发需要，代码体积小意味着会有更多的人有兴趣将其接入移动端，概念少意味着小白也能快速上手，俗话说得小白者得天下，vue能与 react这种顶级大厂团伙化规模维护的框架库分庭抗礼也不是没有道理的