深入学习Vue 源码（一）完整版：同时包含编译器和运行时的版本。编译器：用来将模板字符串编译成为 JavaScript

知其然，更要知其所以然。作为一个Coder，不愿一直做一个只会Crud的搬砖码农。因此我选择了Vue的源码，深入其内部。本篇主要从Vue的打包入口开始，寻找Vue的构造函数，通过简单的例子，带你通过断掉调试来开启Vue 的源码世界，了解Vue是如何挂载实例属性、实例方法，核心是学习Vue响应式原理的实现。文中截取的是部分源码和学习过程中添加的注释，若需要完整的带有注释的源码，可访问：github.com/linh0801/vu…

有问题可以评论联系作者，有出入的地方，也可以一起交流！码字不易，点个赞鼓励一下，谢谢！

前置准备工作

vue 源码的获取

gitbub 中获取vue的源码，项目地址：github.com/vuejs/vue
可以fork拷贝一份源码到自己的git 中，最终可以将自己的源码注释上传到github中

源码的目录结构

src
├─compiler 编译相关
├─core Vue 核心库
├─platforms 平台相关代码
├─server SSR，服务端渲染
├─sfc .vue 文件编译为 js 对象
└─shared 公共的代码

调试设置

打包

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

npm i

设置 sourcemap

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

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-
full-dev"

执行dev
- npm run dev 执行打包，用的是 rollup，-w 参数是监听文件的变化，文件变化自动重新打包 -c 是指明要执行的配置文件是scripts/config.js， --environment 是打包的环境，通过配置TARGET不同的值，打包生成是不同版本的vue
- 结果在dist 目录下生成一个vue.js 和 vue.js.map 的文件

调试

examples 文件夹下的代码中vue.min.js 替换成 vue.js
打开 Chrome 的调试工具中的 source

vue 的不同构建版本

npm run build 重新打包所有文件
官方对不同版本的解释，地址：cn.vuejs.org/v2/guide/in…

#术语

完整版：同时包含编译器和运行时的版本。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
UMD：UMD 版本可以通过默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。
CommonJS：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。
ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件：
- 为打包工具提供的 ESM：为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。
- 为浏览器提供的 ESM (2.6+)：用于在现代浏览器中通过

Runtime + Compiler vs. Runtime-only

// Compiler
// 需要编译器，把 template 转换成 render 函数
// const vm = new Vue({
//  el: '#app',
//  template: '<h1>{{ msg }}</h1>',
//  data: {
//   msg: 'Hello Vue'
//  }
// })
// Runtime
// 不需要编译器
const vm = new Vue({
 el: '#app',
 render (h) {
  return h('h1', this.msg)
},
 data: {
  msg: 'Hello Vue'
}
})

运行时版本由于没有编译器无法解析 template，此时只能使用render 函数

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

寻找入口文件

执行环境构建

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

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

总结

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

从入口开始

通过上面的学习，我们知道了vue 的完整版的入口文件是entry-runtime-with-compiler.js，路径是 src/platform/web/entry-runtime-with-compiler.js

问题导入

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

const vm = new Vue({
 el: '#app',
 template: '<h3>Hello template</h3>',
 render (h) {
return h('h4', 'Hello render')
}
})

源码片段：

  // 1. 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
 if (!options.render) {
  // 2. 把 template/el 转换成 render 函数
  ……
}
 // 3. 调用 mount 方法，挂载 DOM
 return mount.call(this, el, hydrating)

调试

调试的方法

  const vm = new Vue({
 el: '#app',
 template: '<h3>Hello template</h3>',
 render (h) {
  return h('h4', 'Hello render')
}
})

总结

通过源码的阅读和调试，想必聪明的你已知道问题的答案了！没错，在Vue实例化的options 中若是同时存在template 和 render , template 的配置无效，只会执行 render 函数

entry-runtime-with-compiler.js 做了什么事？

判断el 是不是 body 或 html 标签元素
把 template/el 转换成 render 函数
调用mount 方法，挂载 DOM

vue 的构造函数在哪里

上一节，我们从vue 的入口文件src/platforms/web/entry-runtime-with-compiler.js里找到了这里面对$mount 方法进行了扩展，使vue 能够解析template 对应的模板，可是我们却并没有发现vue 的构造函数的身影，但是我们还是可以发现它里面引用了 './runtime/index' 这一节我们一起来玩个捉迷藏的游戏，寻找Vue 的构造函数吧！

我们在entry-runtime-with-compiler.js中，

import Vue from './runtime/index'

通过vscode 将光标移动到此处的Vue 按下Ctrl 选中后鼠标左击，我们跳转到 src/platform/web/runtime/index.js

源码片段：

// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

// install platform runtime directives & components
// 注册与平台相关的全局指令 例如 v-show ，v-model
// 注册与平台相关的全局组件 例如 v-transition , v-transition-group
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

// public mount method
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}

从代码中，可以看出该文件主要负责：

设置 Vue.config
设置与平台相关的指令和组件
- 指令： v-show 和 v-model
- 组件： transition 和 transition-group
注册与平台相关的__patch__ 方法（打补丁，和对比新旧的Vnode
设置$mount 方法，挂载Dom 在此处我们还是看不到Vue 的构造函数，我们还是通过import Vue from 'core/index.js'

这个文件的负责：

定义了Vue 的全局静态方法 ,initGlobalAPI(Vue)
在Vue的原型上定义了与服务端渲染有关的API
声明 Vue 的版本

我们通过import Vue from './instance/index'，继续深入，跳转至src/core/instance/index.js

源码片段：

// 此处不用class的原因是方便后续给Vue 的实例混入实例 成员，
// 用类的话，在后续中使用Vue.prototype 来挂载方法就显得很奇怪
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof Vue) // this 不是vue 的实例 ，把Vue 当做普通函数来调用
) {
  warn('Vue is a constructor and should be called with the `new` keyword')
}
// 调用 Vue 的_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)

经过一层层的寻找，我们终于找到Vue 的构造函数

4个导出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 中混入了常用的实例成员

Vue 的初始化

接下来我们通过断点调试的方法，来解读Vue初始化这个过程

准备工作

在examples 文件夹下创建一个Vue 的调用入口文件，示例代码：

// 路径： vue/examples/03-initVue/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>initVue</title>
</head>
<body>
<div id="app">
  <div><h1>Hello World</h1></div>
  {{ msg }}
</div>

<script src="../../dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue'
    }
  })
</script>
</body>
</html>

VSCODE 安装 live server 扩展，方便我们修改页面不需要手动刷新页面

启动服务

打开准备的入口文件，鼠标右击在弹窗的选项中选择 OPEN With Live Server
浏览器自动打开，开启开发人员工具
由于我们在打包的时候开启了sourcemap ,因此我们可以看到 1 中的源码
我们分别在上面介绍过的和Vue 相关的4个文件中打上断点，具体位置可以参考 2
在Watch 下添加Vue 的监控，参考 3

调试

接下来我们就可以开始调试，F5 刷新页面此时我们通过以下几个步骤对core/instance/index.js一个主线调试，不深入每个方法内部：
- 断点进入的是core/instance/index.js 里的 initMixin(vm)
- 通过Watch 面板,我们可以看到此时Vue的原型prototype中只有构造器和原型链上的Object
- F10 ，执行下一步，此时执行到stateMinxin(vm),我们再来观察Vue 的变化：此时，原型上多了一个 _init(options)
- 接下来就是重复以上的步骤，此处就不做过多介绍

调试完后，笔者在源码的注释中做了小结，上菜~

// 此处不用class的原因是方便后续给Vue 的实例混入实例 成员，
// 用类的话，在后续中使用Vue.prototype 来挂载方法就显得很奇怪
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof Vue) // this 不是vue 的实例 ，把Vue 当做普通函数来调用
) {
  warn('Vue is a constructor and should be called with the `new` keyword')
}
// 调用 Vue 的_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)

F8 我们跳转到下一个断点的位置：src/core/index.js,如图：
- F10 , 执行跳到下一步，我们来观察Vue 实例，可以发现此时Vue 上面多了很多的静态方法
F8 继续我们的下一个断点，我们此时进入src/platform/web/runtime/index.js
F8 继续我们的下一个断点，我们此时进入src/platform/web/runtime/entry-runtime-with-compiler.js

Vue 构造函数实例化

const vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue'
    }
  })

看了这么多代码，上面这段代码肯定是最熟悉的了。在完成对Vue初始化过后，就开始对Vue进行实例化了。接下来我们通过断点调试

代码指定到new Vue(),进入Vue 构造器中，执行_init 方法

F11 进入 _init方法内部，源码：

// 给vue 增加_init 方法
// 合并options / 初始化操作
Vue.prototype._init = function (options?: Object) {
	...
  // merge 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.
    // 合并内部组件 keep-alive
    initInternalComponent(vm, options)
  } else {
    // Vue 构造器上的 vm.options 和 实例化Vue 传入的options 进行合并
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )
  }
	...
  // 初始化声明声明周期相关的变量
  // $parent/$children/$root/$refs
  initLifecycle(vm)
  // vm 的事件监听初始化，父组件绑定当前组件的事件上
  initEvents(vm)
  // vm 编译render 的初始化
  // $slots/$scopedSlots/_c/$createElement/$attrs/$listeners
  initRender(vm)
  // 钩子函数 beforeCreated
  callHook(vm, 'beforeCreate')
  // 初始化 vm 的 _props/methods/_data/computed/watch
  initState(vm)
  // 把 inject 的成员注入到 vm 上
  initInjections(vm) // resolve injections before data/props
  // 初始化 provide
  initProvide(vm) // resolve provide after data/props
  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)
  }
  // 将el挂载到Vue 实例上，完成渲染
  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

首次渲染

通过调试代码，记录首次渲染过程

数据响应式原理

问题导入

vm.msg = { count: 0 } ，重新给属性赋值，是否是响应式的？
vm.arr[0] = 4 ，给数组元素赋值，视图是否会更新
vm.arr.length = 0 ，修改数组的 length，视图是否会更新
vm.arr.push(4) ，视图是否会更新

接下来我们带着以上的问题，通过源码的阅读来学习响应式原理，并得到答案

响应式处理的入口

整个响应式的过程是比较复杂的，我们从入口文件一步步深入

src\core\instance\init.js
- initState(vm) vm 状态的初始化，初始化了 _data、_props、methods 等
- 在initState这个过程中，重点关注init
src\core\instance\state.js，在initState这个过程中，重点关注initData，初始化_data

// 数据的初始化
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}

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 */)
}

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

  export function observe (value: any, asRootData: ?boolean): Observer | void
{
 // 判断 value 是否是对象
 if (!isObject(value) || value instanceof VNode) {
  return
}
 let ob: Observer | void
 // 如果 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
}

Observer

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

  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
  // 将实例挂载到观测对象的 __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.
 */
 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])
 }
}
}

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

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
) {
 // 1. 为每一个属性，创建依赖对象实例
 const dep = new Dep()
 // 获取 obj 的属性描述符对象
 const property = Object.getOwnPropertyDescriptor(obj, key)
 if (property && property.configurable === false) {
  return
}
 // 提供预定义的存取器函数
 // cater for pre-defined getter/setters
 const getter = property && property.get
 const setter = property && property.set
 if ((!getter || setter) && arguments.length === 2) {
  val = obj[key]
}
 // 2. 判断是否递归观察子对象，并将子对象属性都转换成 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() 添加相互的依赖
    // 1个组件对应一个 watcher 对象
    // 1个watcher会对应多个dep（要观察的属性很多）
    // 我们可以手动创建多个 watcher 监听1个属性的变化，1个dep可以对应多个watcher
    dep.depend()
    // 如果子观察目标存在，建立子对象的依赖关系，将来 Vue.set() 会用到
    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
   // 如果新值等于旧值或者新值旧值为null则不执行
   /* 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
  }
   // 3. 如果新值是对象，观察子对象并返回 子的 observer 对象
   childOb = !shallow && observe(newVal)
   // 4. 发布更改通知
   dep.notify()
 }
})
}

数组的响应式处理

Observer 的构造函数中

 // 数组的响应式处理
if (Array.isArray(value)) {
 if (hasProto) {
  protoAugment(value, arrayMethods)
} else {
  copyAugment(value, arrayMethods, arrayKeys)
}
 // 为数组中的每一个对象创建一个 observer 实例
 this.observeArray(value)
} else {
 // 编译对象中的每一个属性，转换成 setter/getter
 this.walk(value)
}
function protoAugment (target, src: Object) {
 /* eslint-disable no-proto */
 target.__proto__ = src
 /* eslint-enable no-proto */
}
/* 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])
}
}

处理数组修改数据的方法
- 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
})
})

Dep

src\core\observer\dep.js
依赖对象
记录 watcher 对象
depend() -- watcher 记录对应的 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 数组中，当数据变化的时候调用dep.notify() 通知 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
被使用

// 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
export function pushTarget (target: ?Watcher) {
 targetStack.push(target)
 Dep.target = target
}
export function popTarget () {
// 出栈操作
 targetStack.pop()
 Dep.target = targetStack[targetStack.length - 1]
}

Watcher类

Watcher 分为三种，Computed Watcher、用户 Watcher (侦听器)、渲染 Watcher
渲染 Watcher 的创建时机
- /src/core/instance/lifecycle.js

export function mountComponent (
 vm: Component,
 el: ?Element,
 hydrating?: boolean
): Component {
 vm.$el = el
 ……
 callHook(vm, 'beforeMount')
 let updateComponent
 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && config.performance && mark)
{
  ……
} else {
  updateComponent = () => {
   vm._update(vm._render(), hydrating)
 }
}
// 创建渲染 Watcher，expOrFn 为 updateComponent
 // 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 */)
 hydrating = false
 // manually mounted instance, call mounted on self
 // mounted is called for render-created child components in its inserted
hook
 if (vm.$vnode == null) {
  vm._isMounted = true
  callHook(vm, 'mounted')
}
 return vm
}

渲染watcher创建过程

渲染 wacher 创建的位置 lifecycle.js 的 mountComponent 函数中
Wacher 的构造函数初始化，处理 expOrFn （渲染 watcher 和侦听器处理不同）
调用 this.get() ，它里面调用 pushTarget()，创建全局唯一的Watcher，然后 this.getter.call(vm, vm) （对于渲染 wacher 调用 updateComponent），如果是用户 wacher 会获取属性的值（触发get操作）
当数据更新的时候，dep 中调用 notify() 方法，notify() 中调用 wacher 的 update() 方法 update() 中调用 queueWatcher()
queueWatcher() 是一个核心方法，去除重复操作，调用 flushSchedulerQueue() 刷新队列并执行 watcher
flushSchedulerQueue() 中对 wacher 排序，遍历所有 wacher ，如果有 before，触发生命周期的钩子函数 beforeUpdate，执行 wacher.run()，它内部调用 this.get()，然后调用 this.cb() (渲染 wacher 的 cb 是 noop)
整个流程结束

实例方法/数据

vm.$set

功能：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

对象不能是Vue实例或Vue实例上的根数据对象$data

示例用法：
```
vm.$set(obj, 'foo', 'test') 
```

定义的位置

Vue.set()
- global-api/index.js

  // 静态方法 set/delete/nextTick
 Vue.set = set
 Vue.delete = del
 Vue.nextTick = nextTick

Vue.$set()
- instance/index.js

// 注册 vm 的 $data/$props/$set/$delete/$watch
// instance/state.js
stateMixin(Vue)
// instance/state.js
Vue.prototype.$set = set
Vue.prototype.$delete = del

* observer/index.js

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)}`)
}
// 设置的目标对象是数组，且key 是有效的索引
if (Array.isArray(target) && isValidArrayIndex(key)) {
  // 原有数组的长度和传入的key 比较取两者最大的一个作为修改后数组的长度
  target.length = Math.max(target.length, key)
  // 此处有两种情况
  // 当 key < 原有数组的长度， 此处是替换原有对应位置的数据
  // 当 key >= 原有数组的长度, 此处是往数组中新增
  target.splice(key, 1, val)
  return val
}
// key 已经在目标对象中存在，且 key 不存在于Object的原型上
if (key in target && !(key in Object.prototype)) {
  // 修改原有对象的属性值
  target[key] = val
  return val
}
// 获取Observe 对象
const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
  // 不能对Vue 实例 或者 $data Set 操作
  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
}
// 不是一个响应式对象
if (!ob) {
  target[key] = val
  return val
}
// 为新增的属性定义响应式
defineReactive(ob.value, key, val)
// 通知视图更新
ob.dep.notify()
return val
}

调试

<body>
<div id="app">
  {{ obj.title }}
  <hr>
  {{ obj.name }}
  <hr>
  {{ arr }}
</div>

<script src="../../dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      obj: {
        title: 'Hello Vue'
      },
      arr: [1, 2, 3]
    }
  })
  // 非响应式数据
 	// vm.obj.name = 'test'
  // vm.arr[0] = 9
  vm.$set(vm.obj, 'name', 'linhuan')
  vm.$set(vm.arr, 0, 9)
</script>
</body>

回顾 defineReactive 中的 childOb，给每一个响应式对象设置一个 ob 调用 $set 的时候，会获取 ob 对象，并通过 ob.dep.notify() 发送通知

vm.$delete

功能：删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。
示例用法：

vm.$delete(vm.obj, 'msg')

定义位置

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

  // 静态方法 set/delete/nextTick
 Vue.set = set
 Vue.delete = del
 Vue.nextTick = nextTick

vm.$delete()
- instance/index.js

  // 注册 vm 的 $data/$props/$set/$delete/$watch
stateMixin(Vue)
// instance/state.js
Vue.prototype.$set = set
Vue.prototype.$delete = del

del()
- src\core\observer\index.js

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()
}

vm.$watch

没有静态方法，因为$watch 方法中要使用 Vue 的实例

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) {
 console.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
})

三种类型的Watcher

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}"`)
      }
    }

调试

查看Watcher 的创建顺序
查看渲染Watcher 的执行过程
- 当数据更新，defineReactive 的 set 方法中调用 dep.notify()
- 调用 watcher 的 update()
- 调用 queueWatcher()，把 wacher 存入队列，如果已经存入，不重复添加
- 循环调用 flushSchedulerQueue()
  - 通过 nextTick()，在消息循环结束之前时候调用 flushSchedulerQueue()
- 调用 wacher.run()
  - 调用 wacher.get() 获取最新值
  - 如果是渲染 wacher 结束
  - 如果是用户 watcher，调用 this.cb()

异步更新nextTick

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

定义位置

src\core\instance\render.js

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

nextTick()
- src\core\util\next-tick.js

  // nextTick
  export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  //  将回调函数缓存起来
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    // 执行promise.then(flushCallbacks)
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
// -------timerFunc--------
  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:
/* 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.
    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)
  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.
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}
  // ----flushCallbacks-------
// 执行callbacks 缓存中的回调
function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // for 循环遍历执行回调
  ···
}
//

调试

<body>
<div id="app">
  <p id="p" ref="p1">{{ msg }}</p>
  {{ name }}<br>
  {{ title }}<br>
</div>
<script src="../../dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello nextTick',
      name: 'Vue.js',
      title: 'Title'
    },
    // 主线线程的同步代码遇到mounted 执行这个钩子函数
    mounted() {
      this.msg = 'Hello World'
      this.name = 'Hello snabbdom'
      this.title = 'Vue.js'
      // 当值改变后，Dep通知watcher进行视图的更新
      // 视图更新会先调用queueWatcher 内部执行nextTick(flushSchedulerQueue)
      // 将 flushSchedulerQueue 压入 callbacks 数组中
      // 执行此处的nextTick
      // 将此处的匿名函数压入callback
      this.$nextTick(() => {
        console.log(this.$refs.p1.textContent)
      })
      // 同步代码完成首次渲染之后，开始调用promise 的then(flushCallbacks)
      // 此时遍历callbacks，首先进行 视图的更新，再进行匿名函数的调用就可以获取到更新后的dom 
    }
  })

  
</script>
</body>

当值改变后，Dep通知渲染watcher进行视图的更新
视图更新会先调用queueWatcher 内部执行nextTick(flushSchedulerQueue)
将 flushSchedulerQueue 压入 callbacks 数组中
执行$nextTick(fn),将fn函数压入callbacks
同步代码完成首次渲染之后，开始调用promise 的then(flushCallbacks)
执行flushCallbacks，遍历callbacks，首先进行视图的更新，再执行fn函数的调用就可以获取到更新后的Dom