一、准备工作

1.1 Vue 源码的获取

• 项目地址：https://github.com/vuejs/vue/releases/tag/v2.6.14

1.2 源目录结构

Vue 在开发的时候首先会按照功能把代码拆分到不同的文件夹，然后再拆分成小的模块，这样的代码结构清楚，可以提高代码的可读性和可维护性

src
├─compiler 		编译相关	
├─core 			Vue 核心库（与平台无关的代码）
│	components	定义 vue 自带的 keep-alive 组件
│	global-api	定义 vue 静态方法
│	instance	创建 vue 实例（构造函数、初始化、生命周期函数）
│	observer	响应式机制实现（本章重点）
│	util		公共成员
│	vdom		虚拟dom
├─platforms 	和平台相关代码
│	web			
│	weex		基于vue移动端框架
├─server 		SSR，服务端渲染
├─sfc 			单文件组件（.vue 文件编译为 js 对象）
└─shared 		公共的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.3 了解 Flow

• 官网：https://flow.org/
• JavaScript 的静态类型检查器
• Flow 的静态类型检查错误是通过静态类型推断实现的
  • 文件开头通过 // @flow 或者 /* @flow */ 声明

/* @flow */ 
function square(n: number): number { 
  return n * n; 
}
square("2"); // Error!
1
2
3
4
5

• 具体的使用方式请参考博客 JavaScript 深度剖析 - 类型系统 + TypeScript

1.4 调试设置

打包工具 Rollup

• Vue.js 源码的打包工具使用的是 Rollup，比 Webpack 轻量
• Webpack 把所有文件当做模块，Rollup 只处理 js 文件更适合在 Vue.js 这样的库中使用
• Rollup 打包不会生成冗余的代码

安装依赖

npm i
1

设置 sourcemap（代码地图）

• package.json 文件中的 dev 脚本中添加参数 --sourcemap

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:webfull-dev"
1

执行 dev

• 首先我们先将 dist 目录删除，以便看得更清楚
• npm run dev 执行打包，用的是 rollup，-w 参数是监听文件的变化，文件变化自动重新打
  包
• 此时 dist 目录重新生成内容如下，新增了 vue.js 和 vue.js.map
• 至于其他版本的 js 文件我们后续可以通过调用 npm run build 得到

调试

• examples 的 index.html 示例中引入的 vue.min.js 改为 vue.js

• 打开 Chrome 的调试工具中的 Source

1.5 Vue 的不同构建版本

• npm run build 重新打包所有文件
• 官方文档 - 对不同构建版本的解释

术语

• 完整版：同时包含编译器和运行时的版本
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码，体积大、效率低
• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码，体积小、效率高。基本上就是除去编译器的代码
• UMD：UMD 版本通用的模块版本，支持多种模块方式。 vue.js 默认文件就是运行时 + 编译器的 UMD 版本
• CommonJS(cjs)：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1
• ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件，为现代打包工具提供的版本
  • ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包
  • ES6 模块与 CommonJS 模块的差异

Runtime + Compiler（完整版） vs Runtime-only（运行时版本）

// 完整版
<script src="../../dist/vue.js"></script>
// Compiler
// 需要编译器，把 template 转换成 render 函数
const vm = new Vue({
  el: '#app',
  template: '<h1>{{ msg }}</h1>',
  data: {
    msg: 'Hello Vue'
  }
})
1
2
3
4
5
6
7
8
9
10
11

// 运行时版本（效率更高，少了3000多行的编译代码，推荐使用）

<script src="../../dist/vue.runtime.js"></script>
// Runtime
// 不需要编译器
const vm = new Vue({
  el: '#app',
  // template: '<h1>{{ msg }}</h1>',报错
  render (h) {
    return h('h1', this.msg)
  },
  data: {
    msg: 'Hello Vue'
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 基于 Vue-CLI 创建的项目默认使用的是 vue.runtime.esm.js（运行时版本）

// src/main.js
import Vue from 'vue'
1
2

• 可以通过查看 webpack 的配置文件查看使用版本（终端输入）

vue inspect > output.js
1

// output.js
  resolve: {
    alias: {
	  ...
	  vue$: 'vue/dist/vue.runtime.esm.js'
	}
  }
1
2
3
4
5
6
7

• 注意：*.vue 文件中的模板是在构建时预编译的，最终打包后的结果不需要编译器，只需要运行时版本即可

1.6 寻找入口文件

• 查看 dist/vue.js 的构建过程

执行构建

npm run dev
# "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev" 
# --environment TARGET:web-full-dev 设置环境变量 TARGET
1
2
3

• script/config.js 的执行过程
  • 作用：生成 rollup 构建的配置文件
  • 使用环境变量 TARGET = web-full-dev

// 判断环境变量是否有 TARGET
// 如果有的话 使用 genConfig() 生成 rollup 配置文件
if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET)
} else {
  // 否则获取全部配置
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}
1
2
3
4
5
6
7
8
9

• genConfig(name)
  • 根据环境变量 TARGET 获取配置信息
  • builds[name] 获取生成配置的信息

const builds = {
  ...
  // Runtime+compiler development build (Browser)
  'web-full-dev': {
    // 入口
    entry: resolve('web/entry-runtime-with-compiler.js'),
    // 出口
    dest: resolve('dist/vue.js'),
    // 模块化方式
    format: 'umd',
    // 打包方式（开发或生产模式）
    env: 'development',
    // 别名
    alias: { he: './entity-decoder' },
    // 文件头
    banner
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• resolve()
  • 获取入口和出口文件的绝对路径

const aliases = require('./alias')
const resolve = p => {
  // 根据路径中的前半部分去 alias 中找别名
  const base = p.split('/')[0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1))
  } else {
    return path.resolve(__dirname, '../', p)
  }
}
1
2
3
4
5
6
7
8
9
10

// scripts/alias
const path = require('path')

// 转换为绝对路径
const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {
  ...
  web: resolve('src/platforms/web'),
}
1
2
3
4
5
6
7
8
9
10

• 结果
  • 把 src/platforms/web/entry-runtime-with-compiler.js 构建成 dist/vue.js，如果设置 --sourcemap 会生成 vue.js.map
  • src/platform 文件夹下是 Vue 可以构建成不同平台下使用的库，目前有 weex 和 web，还有服务器端渲染的库

1.7 从入口开始

通过查看源码解决下面问题

• 观察以下代码，通过阅读源码，回答在页面上输出的结果

const vm = new Vue({
  el: '#app',
  template: '<h3>Hello Template</h3>',
  render(h) {
    return h('h4', 'Hello Render')
  }
})
1
2
3
4
5
6
7

• 阅读源码记录
  • src/platform/web/entry-runtime-with-compiler.js
  • el 不能是 body 或者 html 标签
  • 如果没有 render，把 template 转换成 render 函数
  • 如果有 render 方法，直接调用 mount 挂载 DOM
  • 如果 new Vue 同时设置了 template 和 render() ，此时只会执行 render()

// 保留 Vue 实例的 $mount 方法
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  // 非ssr情况下为 false，ssr 时候为true
  hydrating?: boolean
): Component {
  // 获取 el 对象
  el = el && query(el)

  /* istanbul ignore if */
  // el 不能是 body 或者 html
  if (el === document.body || el === document.documentElement) {
  // 判断是否是生产环境
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  // 判断是否有 render 函数
  // 把 template/el 转换成 render 函数
  if (!options.render) {
    ...
  }
  // 调用 mount 方法，渲染 DOM
  return mount.call(this, el, hydrating)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 调试代码
  • 调试的方法

const vm = new Vue({
  el: '#app',
  template: '<h3>Hello Template</h3>',
  render(h) {
    return h('h4', 'Hello Render')
  }
})
1
2
3
4
5
6
7

二、Vue 初始化的过程

2.1 Vue 的构造函数在哪里

• src/platform/web/entry-runtime-with-compiler.js 中引用了 ‘./runtime/index’
• src/platform/web/runtime/index.js
  • 设置 Vue.config
  • 设置平台相关的指令和组件
    • 指令 v-model、v-show
    • 组件 transition、transition-group
  • 设置平台相关的 __patch__ 方法（打补丁方法，对比新旧的 VNode）
  • 设置 $mount 方法，挂载 DOM

import config from 'core/config'
...
// install platform runtime directives & components
// 设置平台相关的指令和组件(运行时)
// extend() 将第二个参数对象成员 拷贝到 第一个参数对象中去
// 指令 v-model、v-show
extend(Vue.options.directives, platformDirectives)
// 组件 transition、transition-group
extend(Vue.options.components, platformComponents)

// install platform patch function
// 设置平台相关的 __patch__ 方法 (虚拟DOM 转换成 真实DOM) 
// 判断是否是浏览器环境（是 - 直接返回， 非 - 空函数 noop
Vue.prototype.__patch__ = inBrowser ? patch : noop

// public mount method
// 设置 $mount 方法，挂载 DOM
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• src/platform/web/runtime/index.js 中引用了 ‘core/index’
• src/core/index.js
  • 定义了 Vue 的静态方法
  • initGlobalAPI(Vue)
• src/core/index.js 中引用了 ‘./instance/index’
• src/core/instance/index.js
  • 定义了 Vue 的构造函数

// 此处不用 class 的原因是因为方便后续给 Vue 实例混入实例成员
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')
  }
  // 调用 _init() 方法
  this._init(options)
}
// 注册 vm 的 _init() 方法，初始化 vm
initMixin(Vue)
// 注册 vm 的 $data/$props/$set/$delete/$watch
stateMixin(Vue)
// 初始化事件相关方法
// $on/$once/$off/$emit
eventsMixin(Vue)
// 初始化生命周期相关的混入方法
// _update/$forceUpdate/$destroy
lifecycleMixin(Vue)
// 混入 render
// $nextTick/_render
renderMixin(Vue)

export default Vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2.2 四个导出 Vue 的模块

• src/platforms/web/entry-runtime-with-compiler.js
  • web 平台相关的入口
  • 重写了平台相关的 $mount() 方法
  • 注册了 Vue.compile() 方法，传递一个 HTML 字符串返回 render 函数
• src/platforms/web/runtime/index.js
  • web 平台相关
  • 注册和平台相关的全局指令：v-model、v-show
  • 注册和平台相关的全局组件： v-transition、v-transition-group
  • 全局方法
    • __patch__：把虚拟 DOM 转换成真实 DOM
    • $mount：挂载方法
• src/core/index.js
  • 与平台无关
  • 设置了 Vue 的静态方法，initGlobalAPI(Vue)
• src/core/instance/index.js
  • 与平台无关
  • 定义了构造函数，调用了 this._init(options) 方法
  • 给 Vue 中混入了常用的实例成员

2.3 静态成员初始化

src/core/global-api/index.js

• 初始化 Vue 的静态方法
• 可参考 Vue 文档全局 API

export function initGlobalAPI (Vue: GlobalAPI) {
  ...
  // 初始化 Vue.config 对象
  Object.defineProperty(Vue, 'config', configDef)

  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  // 这些工具方法不视作全局API的一部分，除非你已经意识到某些风险，否则不要去依赖他们
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }
  // 静态方法 set/delete/nextTick
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  // 2.6 explicit observable API
  // 让一个对象可响应
  Vue.observable = <T>(obj: T): T => {
    observe(obj)
    return obj
  }
  // 初始化 Vue.options 对象，并给其扩展
  // components/directives/filters
  Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  // 这是用来标识 "base "构造函数，在Weex的多实例方案中，用它来扩展所有普通对象组件
  Vue.options._base = Vue

  // 设置 keep-alive 组件
  extend(Vue.options.components, builtInComponents)

  // 注册 Vue.use() 用来注册插件
  initUse(Vue)
  // 注册 Vue.mixin() 实现混入
  initMixin(Vue)
  // 注册 Vue.extend() 基于传入的options返回一个组件的构造函数
  initExtend(Vue)
  // 注册 Vue.directive()、Vue.component()、Vue.filter()
  initAssetRegisters(Vue)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

2.4 实例成员初始化

src/core/instance/index.js

• 定义 Vue 的构造函数
• 初始化 Vue 的实例成员
• 可参考 Vue 实例文档

// 此处不用 class 的原因是因为方便后续给 Vue 实例混入实例成员
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')
  }
  // 调用 _init() 方法
  this._init(options)
}
// 注册 vm 的 _init() 方法，初始化 vm
initMixin(Vue)
// 注册 vm 的 $data/$props/$set/$delete/$watch
stateMixin(Vue)
// 初始化事件相关方法
// $on/$once/$off/$emit
eventsMixin(Vue)
// 初始化生命周期相关的混入方法
// _update/$forceUpdate/$destroy
lifecycleMixin(Vue)
// 混入 render
// $nextTick/_render
renderMixin(Vue)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• initMixin(Vue)：初始化 _init() 方法

export function initMixin (Vue: Class<Component>) {
  // 给 Vue 实例增加 _init() 方法
  // 合并 options / 初始化操作
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    // 如果是 Vue 实例不需要被 observe
    vm._isVue = true
    // merge options
    // 合并 options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      // 优化内部组件实例化，因为动态选项合并非常慢，而且内部组件选项都不需要特殊处理。
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    // vm 的生命周期相关变量初始化
    // $children/$parent/$root/$refs
    initLifecycle(vm)
    // vm 的事件监听初始化, 父组件绑定在当前组件上的事件
    initEvents(vm)
    // vm 的编译render初始化
    // $slots/$scopedSlots/_c/$createElement/$attrs/$listeners
    initRender(vm)
    // beforeCreate 生命钩子的回调
    callHook(vm, 'beforeCreate')
    // 把 inject 的成员注入到 vm 上
    initInjections(vm) // resolve injections before data/props
    // 初始化 vm 的 _props/methods/_data/computed/watch
    initState(vm)
    // 初始化 provide
    initProvide(vm) // resolve provide after data/props
    // created 生命钩子的回调
    callHook(vm, 'created')

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
    // 调用 $mount() 挂载
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

• initState(vm)

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  // 将props成员转换成响应式数据，并注入到vue实例
  if (opts.props) initProps(vm, opts.props)
  // 初始化选项中的方法(methods)
  if (opts.methods) initMethods(vm, opts.methods)
  // 数据的初始化
  if (opts.data) {
    // 把data中的成员注入到Vue实例 并转换为响应式对象
    initData(vm)
  } else {
    // observe数据的响应式处理
    observe(vm._data = {}, true /* asRootData */)
  } 
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、首次渲染

• Vue 初始化完毕，开始真正的执行
• 调用 new Vue() 之前，已经初始化完毕

四、数据响应式原理

4.1 响应式处理的入口

• src\core\instance\init.js
  • initState(vm) vm 状态的初始化
  • 初始化了 _data、_props、methods 等
• src\core\instance\state.js

export function initState (vm: Component) {
  ...
  // 数据的初始化
  if (opts.data) {
    // 把 data 中的成员注入到 Vue 实例，并转换为响应式对象
    initData(vm)
  } else {
    // observe 数据的响应式处理，响应式处理入口，如果 data 没有传入，则转换成空对象
    observe(vm._data = {}, true /* asRootData */)
  }
  ...
}
1
2
3
4
5
6
7
8
9
10
11
12

• initData(vm) vm 数据的初始化

function initData (vm: Component) {
  let data = vm.$options.data
  // 初始化 _data，组件中 data 是函数，调用函数返回结果
  // 否则直接返回 data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  ...
  
  // proxy data on instance
  // 获取 data 中的所有属性
  const keys = Object.keys(data)
  // 获取 props / methods
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  // 判断 data 上的成员是否和  props/methods 重名
  ...
  
  // observe data
  // 数据的响应式处理
  observe(data, true /* asRootData */)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• src\core\observer\index.js
  • observe(value, asRootData)
  • 负责为每一个 Object 类型的 value 创建一个 observer 实例

/**
 * Attempt to create an observer instance for a value,
 * returns the new observer if successfully observed,
 * or the existing observer if the value already has one.
 */
// 试图为一个 value 创建一个 observer，
// 如果创建成功，则返回新的 observer，
// 或返回已存在的 observer
export function observe (value: any, asRootData: ?boolean): Observer | void {
  // 判断 value 是否是对象 是否是 VNode虚拟DOM 的实例
  // 如果不是对象/是VNode实例：不需要做响应式处理 直接返回
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  // 如果 value 有 __ob__(observer对象) 属性
  // 判断 value.__ob__ 属性是否是 observer 的实例
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    // 赋值 最终返回
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    // 创建一个 Observer 对象
    ob = new Observer(value)
  }
  // 处理为根的数据
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

4.2 Observer

• src\core\observer\index.js
  • 对对象做响应化处理
  • 对数组做响应化处理

/**
 - Observer class that is attached to each observed
 - object. Once attached, the observer converts the target
 - object's property keys into getter/setters that
 - collect dependencies and dispatch updates.
 */
// Observer 类附加到每个被观察的对象上
// 一旦被附加，Observer 就会将目标对象的属性键转换为 getter/setter，
// 用来收集依赖关系并派发更新（发送通知）
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
    this.dep = new Dep()
    // 初始化实例的 vmCount 为0
    this.vmCount = 0
    // def 调用 defineProperty 默认不可枚举
    // 将实例挂载到观察对象的 __ob__ 属性
    def(value, '__ob__', this)
    // 数组的响应式处理
    if (Array.isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      // 为数组中的每一个对象创建一个 observer 实例
      this.observeArray(value)
    } else {
      // 遍历对象中的每一个属性，转换成 setter/getter
      this.walk(value)
    }
  }

  /**
 - Walk through all properties and convert them into
 - getter/setters. This method should only be called when
 - value type is Object.
   */
  // 遍历所有属性，并将它们转换为getter/setter
  // 只有当值类型为Object时，才应调用此方法
  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.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

• walk(obj)
  • 遍历 obj 的所有属性，为每一个属性调用 defineReactive() 方法，设置 getter/setter

4.3 defineReactive()

• src\core\observer\index.js
• defineReactive(obj, key, val, customSetter, shallow)
  • 为一个对象定义一个响应式的属性，每一个属性对应一个 dep 对象
  • 如果该属性的值是对象，继续调用 observe
  • 如果给属性赋新值，继续调用 observe
  • 如果数据更新发送通知

对象响应式处理

/**
 * Define a reactive property on an Object.
 */
// 为一个对象定义一个响应式的属性
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  // 创建依赖对象实例
  const dep = new Dep()
  // 获取 obj 的属性描述符对象
  const property = Object.getOwnPropertyDescriptor(obj, key)
  // 通过 configurable 指定当前属性是否为可配置的
  // 如果为不可配置 意味不可删除/重新定义 直接返回
  if (property && property.configurable === false) {
    return
  }
  // 提供预定义的存取器函数
  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  // 参数为两个，获取 value
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }
  // 判断是否递归观察子对象，并将子对象属性都转换成 getter/setter，返回子观察对象
  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      // 如果预定义的 getter 存在则 value 等于getter 调用的返回值
      // 否则直接赋予属性值
      const value = getter ? getter.call(obj) : val
      // 如果存在当前依赖目标，即 watcher 对象，则建立依赖
      if (Dep.target) {
      // 如果子观察目标存在，建立在对象依赖关系
          dep.depend()
        if (childOb) {
          childOb.dep.depend()
          // 如果属性是数组，则特殊处理收集数组对象依赖
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      // 返回属性值
      return value
    },
    set: function reactiveSetter (newVal) {
      // 如果预定义的 getter 存在则 value 等于getter 调用的返回值
      // 否则直接赋予属性值
      const value = getter ? getter.call(obj) : val
      // 如果新值等于旧值或者新值旧值为NaN则不执行
      /* 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()
      }
      // 如果没有 setter 直接返回
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      // 如果预定义setter存在则调用，否则直接更新新值
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      // 如果新值是对象，观察子对象并返回 子的 observer 对象
      childOb = !shallow && observe(newVal)
      // 派发更新(发布更改通知)
      dep.notify()
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

数组的响应式处理

• Observer 的构造函数中

// 获取 arrayMethods 特有的成员 返回的是包含名字的数组
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)

export class Observer {
  ...
  constructor (value: any) {
    ...
    // 数组的响应式处理
    if (Array.isArray(value)) {
      // 判断当前浏览器是否支持对象的原型属性
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      // 为数组中的每一个对象创建一个 observer 实例
      this.observeArray(value)
    } else {
    // 遍历对象中每一个属性，转换成 setter / getter
      this.walk(value)
    }
  }
  /**
 * Augment a target Object or Array by intercepting
 * the prototype chain using __proto__
 */
  // 通过使用__proto__拦截原型链来增强目标对象或数组
  function protoAugment (target, src: Object) {
    /* eslint-disable no-proto */
    target.__proto__ = src
    /* eslint-enable no-proto */
  }

  /**
 * Augment a target Object or Array by defining
 * hidden properties.
   */
  // 通过定义隐藏属性来增强目标对象或数组 
  /* istanbul ignore next */
  function copyAugment (target: Object, src: Object, keys: Array<string>) {
    for (let i = 0, l = keys.length; i < l; i++) {
      const key = keys[i]
      def(target, key, src[key])
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

• 处理数组修改数据的方法
  • src\core\observer\array.js

const arrayProto = Array.prototype
// 使用数组的原型创建一个新的对象
export const arrayMethods = Object.create(arrayProto)
// 修改数组元素的方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

/**
 * Intercept mutating methods and emit events
 */
// 拦截突变方法，并发出事件 
methodsToPatch.forEach(function (method) {
  // cache original method
  // 保存数组原方法
  const original = arrayProto[method]
  // 调用 Object.defineProperty() 重新定义修改数组的方法
  def(arrayMethods, method, function mutator (...args) {
    // 执行数组的原始方法
    const result = original.apply(this, args)
    // 获取数组对象的 ob 对象
    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)
    // notify change
    // 调用了修改数组的方法，调用数组的ob对象发送通知
    ob.dep.notify()
    return result
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

4.4 Dep 类

1. 在 defineReactive() 的 getter 中创建 dep 对象，并判断 Dep.target 是否有值，如果有, 调用 dep.depend()
2. dep.depend() 内部调用 Dep.target.addDep(this)，也就是 watcher 的 addDep() 方法，它内部最调用 dep.addSub(this)，把 watcher 对象，添加到 dep.subs.push(watcher) 中，也就是把订阅者添加到 dep 的 subs 数组中，当数据变化的时候调用 watcher 对象的 update() 方法
3. 什么时候设置的 Dep.target? 通过首次渲染的案例调试观察。调用 mountComponent() 方法的时候，创建了渲染 watcher 对象，执行 watcher 中的 get() 方法
4. get() 方法内部调用 pushTarget(this)，把当前 Dep.target = watcher，同时把当前 watcher 入栈，因为有父子组件嵌套的时候先把父组件对应的 watcher 入栈，再去处理子组件的 watcher，子组件的处理完毕后，再把父组件对应的 watcher 出栈，继续操作
5. Dep.target 用来存放目前正在使用的watcher。全局唯一，并且一次也只能有一个 watcher 被使用

export function defineReactive (...) {
  // 创建依赖对象实例 收集每一个属性的依赖
  const dep = new Dep()
  ...
  // 判断是否递归观察子对象，并将子对象属性都转换成 getter/setter，返回子观察对象
  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    ...
    get: function reactiveGetter () {
      ...
      // 如果存在当前依赖目标，即 watcher 对象，则建立依赖
      if (Dep.target) {
        dep.depend()
        // 如果子观察目标存在，建立子对象的依赖关系
        if (childOb) {
          // 为当前子对象收集依赖
          childOb.dep.depend()
          // 如果属性是数组，则特殊处理收集数组对象依赖
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      // 返回属性值
      return value
    },
    set: function reactiveSetter (newVal) {
      ...
      // 派发更新(发布更改通知)
      dep.notify()
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

• src\core\observer\dep.js
• 依赖对象
• 记录 watcher 对象
• depend() – watcher 记录对应的 dep
• 发布通知

let uid = 0
// dep 是个可观察对象，可以有多个指令订阅它
/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
export default class Dep {
  // 静态属性，watcher 对象
  static target: ?Watcher;
  // dep 实例 Id
  id: number;
  // dep 实例对应的 watcher 对象/订阅者数组
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  // 添加新的订阅者 watcher 对象
  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  // 移除订阅者
  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  // 将观察对象和 watcher 建立依赖
  depend () {
    if (Dep.target) {
      // 如果 target 存在，把 dep 对象添加到 watcher 的依赖中
      Dep.target.addDep(this)
    }
  }

  // 发布通知
  notify () {
    // stabilize the subscriber list first
    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
      subs.sort((a, b) => a.id - b.id)
    }
    // 调用每个订阅者的update方法实现更新
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}
// Dep.target 用来存放目前正在使用的watcher
// 全局唯一，并且一次也只能有一个watcher被使用
// 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 = []
// 入栈并将当前 watcher 赋值给 Dep.target
// 父子组件嵌套的时候先把父组件对应的 watcher 入栈，
// 再去处理子组件的 watcher，子组件的处理完毕后，再把父组件对应的 watcher 出栈，继续操作
export function pushTarget (target: ?Watcher) {
  targetStack.push(target)
  Dep.target = target
}

export function popTarget () {
  // 出栈操作
  targetStack.pop()
  Dep.target = targetStack[targetStack.length - 1]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

4.5 vm.$set

功能

• 官方文档
• 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如this.myObject.newProperty = ‘hi’)
• 注意：对象不能是 Vue 实例，或者 Vue 实例的根数据对象

vm.$set(vm, 'abc', 'z') // 提示警告
vm.$set(vm.$data, 'abc', 'z') // 提示警告
1
2

示例

// 参数：要给哪个对象增加成员、增加属性的名称、属性值
vm.$set(obj, 'foo', 'test')
// 更新数组
vm.$set(vm.arr, 0, 100)
1
2
3
4

定义位置

• Vue.set()
  • src/core/global-api/index.js

  // 静态方法 set/delete/nextTick
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick
1
2
3
4

• vm.$set()
  • src/core/instance/index.js

// instance/index.js
// 注册 vm 的 $data/$props/$set/$delete/$watch
stateMixin(Vue)

// instance/state.js
Vue.prototype.$set = set
Vue.prototype.$delete = del
1
2
3
4
5
6
7

源码

• set() 方法
  • observer/index.js

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
// 设置对象的属性。添加新的属性，如果该属性不存在，则触发更改通知
export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // 判断 target 是否是数组，key 是否是合法的索引
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 判断当前key和数组length的最大值给length
    // 当我们调用$set传递的索引有可能超过数组的length属性
    target.length = Math.max(target.length, key)
    // 通过 splice 对key位置的元素进行替换
    // splice 在 array.js 进行了响应化的处理
    target.splice(key, 1, val)
    return val
  }
  // 如果 key 在对象中已经存在且不是原型成员 直接赋值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // 获取 target 中的 observer 对象
  const ob = (target: any).__ob__
  // 如果 target 是 vue 实例或者 $data 直接返回
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  // 如果 ob 不存在，target 不是响应式对象直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 如果 ob 存在，把 key 设置为响应式属性
  defineReactive(ob.value, key, val)
  // 发送通知
  ob.dep.notify()
  return val
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

4.6 vm.$delet

功能

• 官方文档
• 删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它
• 注意：目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象

示例

vm.$delete(vm.obj, 'msg')
vm.$delete(vm.arr, 0)
1
2

定义位置

• Vue.delete()
  • global-api/index.js

  // 静态方法 set/delete/nextTick
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick
1
2
3
4

• vm.$delete()
  • src/core/instance/index.js

// instance/index.js
// 注册 vm 的 $data/$props/$set/$delete/$watch
stateMixin(Vue)

// instance/state.js
Vue.prototype.$set = set
Vue.prototype.$delete = del
1
2
3
4
5
6
7

源码

• delete() 方法
  • src/core/observer/index.js

/**
 - Delete a property and trigger change if necessary.
 */
// 删除一个属性并在必要时触发更改
export function del (target: Array<any> | Object, key: any) {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // 判断是否是数组，以及 key 是否合法
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 如果是数组通过 splice 删除
    // splice 做过响应式处理
    target.splice(key, 1)
    return
  }
  // 获取 target 的 ob 对象
  const ob = (target: any).__ob__
  // target 如果是 Vue 实例或者 $data 对象，直接返回
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid deleting properties on a Vue instance or its root $data ' +
      '- just set it to null.'
    )
    return
  }
  // 如果 target 对象没有 key 属性直接返回
  if (!hasOwn(target, key)) {
    return
  }
  // 删除属性
  delete target[key]
  // 判断是否是响应式的
  if (!ob) {
    return
  }
  // 通过 ob 发送通知
  ob.dep.notify()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

4.7 vm.$watch

• 官方文档
• vm.$watch( expOrFn, callback, [options] )

功能

• 观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代

参数

• expOrFn：要监视的 $data 中的属性，可以是表达式或函数
• callback：数据变化后执行的函数
  • 函数：回调函数
  • 对象：具有 handler 属性(字符串或者函数)，如果该属性为字符串则 methods 中相应的定义
• options：可选的选项
  • deep：布尔类型，深度监听
  • immediate：布尔类型，是否立即执行一次回调函数

示例

const vm = new Vue({
  el: '#app',
  data: {
  	a: '1',
  	b: '2',
  	msg: 'Hello vue',
    user: {
      firstName: '诸葛',
      lastName: '亮'
    }
  }
})
// expOrFn 是表达式
vm.$watch('msg', function (newVal, oldVal) {
  onsole.log(newVal, oldVal)
})
vm.$watch('user.firstName', function (newVal, oldVal) {
  console.log(newVal)
})
// expOrFn 是函数
vm.$watch(function () {
  return this.a + this.b
}, function (newVal, oldVal) {
  console.log(newVal)
})
// deep 是 true，消耗性能
vm.$watch('user', function (newVal, oldVal) {
  // 此时的 newVal 是 user 对象
  console.log(newVal === vm.user)
}, {
  deep: true
})
// immediate 是 true
vm.$watch('msg', function (newVal, oldVal) {
  console.log(newVal)
}, {
  immediate: true
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

4.8 三种类型的 Watcher 对象

• 没有静态方法，因为 $watch 方法中要使用 Vue 的实例
• Watcher 分三种：计算属性 Watcher、用户 Watcher (侦听器)、渲染 Watcher
• 创建顺序：计算属性 Watcher、用户 Watcher (侦听器)、渲染 Watcher
• vm.$watch()
  • src\core\instance\state.js

源码

Vue.prototype.$watch = function (
  expOrFn: string | Function,
  cb: any,
  options?: Object
): Function {
  // 获取 Vue 实例 this
  const vm: Component = this
  if (isPlainObject(cb)) {
    // 判断如果 cb 是对象执行 createWatcher
    return createWatcher(vm, expOrFn, cb, options)
  }
  options = options || {}
  // 标记为用户 watcher
  options.user = true
  // 创建用户 watcher 对象
  const watcher = new Watcher(vm, expOrFn, cb, options)
  // 判断 immediate 如果为 true
  if (options.immediate) {
    // 立即执行一次 cb 回调，并且把当前值传入
    try {
      cb.call(vm, watcher.value)
    } catch (error) {
      handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
    }
  }
  // 返回取消监听的方法
  return function unwatchFn () {
    watcher.teardown()
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

4.9 异步更新队列-nextTick()

• 官方文档
• Vue 更新 DOM 是异步执行的，批量的
  • 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
  • vm.$nextTick(function () { /* 操作 DOM */ }) / Vue.nextTick(function () {})

vm.$nextTick() 代码演示

<div id="app"> 
	<p ref="p1">{{ msg }}</p> 
</div> 
<script src="../../dist/vue.js"></script> 
<script> 
 const vm = new Vue({ 
  el: '#app', 
  data: { msg: 'Hello nextTick', name: 'Vue.js', title: 'Title' },
  mounted() { 
    this.msg = 'Hello World' 
    this.name = 'Hello snabbdom' 
    this.title = 'Vue.js' 
    this.$nextTick(() => { 
	  console.log(this.$refs.p1.textContent) 
  }) 
 } 
}) 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

定义位置

• src\core\instance\render.js

  Vue.prototype.$nextTick = function (fn: Function) {
    return nextTick(fn, this)
  }
1
2
3

源码

• 手动调用 vm.$nextTick()
• 在 Watcher 的 queueWatcher 中执行 nextTick()
• src\core\util\next-tick.js

const callbacks = []
let pending = false

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 遍历回到函数数组 依次调用
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

// Here we have async deferring wrappers using microtasks.
// In 2.5 we used (macro) tasks (in combination with microtasks).
// However, it has subtle problems when state is changed right before repaint
// (e.g. #6813, out-in transitions).
// Also, using (macro) tasks in event handler would cause some weird behaviors
// that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109).
// So we now use microtasks everywhere, again.
// A major drawback of this tradeoff is that there are some scenarios
// where microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690, which have workarounds)
// or even between bubbling of the same event (#6566).
// 在这里，我们有使用微任务的异步延迟包装器。
// 在2.5中，我们使用了(宏)任务(与微任务相结合)。
// 然而，当状态在重绘之前就被改变时，它有微妙的问题。
// 另外，在事件处理程序中使用(宏)任务会导致一些奇怪的行为。
// 另外，在事件处理程序中使用（宏）任务会导致一些奇怪的行为。
// 所以我们现在又到处使用微任务。
// 这种权衡的一个主要缺点是，有些情况下，
// 微任务的优先级太高，在所谓的顺序事件之间开火，甚至在同一事件的冒泡之间开火
let timerFunc

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
// nextTick行为利用了微任务队列，
// 可以通过原生的Promise.then或MutationObserver访问
// MutationObserver有更广泛的支持，然而在iOS >= 9.3.3的UIWebView中，
// 当在触摸事件处理程序中触发时，它有严重的bug。
// 触发几次后就完全停止工作了......所以，如果原生Promise可用，我们会使用它。
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    // In problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    // 在有问题的UIWebViews中，Promise.then并没有完全break，
    // 但它可能会卡在一个奇怪的状态，即回调被推送到微任务队列中，
    // 但队列并没有被刷新，直到浏览器需要做一些其他工作，例如处理一个计时器
    // 因此，我们可以通过添加一个空的定时器来 "强制 "微任务队列被刷新。
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  // 在没有本地Promise的地方使用MutationObserver
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Technically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  // 降级到setImmediate
  // 从技术上讲，它利用了（宏）任务队列，
  // 但它仍然是比setTimeout更好的选择
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Fallback to setTimeout.
  // 降级到 setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // callbacks 存储所有的回调函数
  // 把 cb 加上异常处理存入 callbacks 数组中
  callbacks.push(() => {
    if (cb) {
      try {
        // 调用 cb()
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 判断队列是否正在被处理
  if (!pending) {
    pending = true
    // 调用
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    // 返回 promise 对象
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130