时光海丶

Vue.js 框架源码与进阶 - Vue.js源码剖析 - 响应式原理（上）

响应式原理 - 成员初始化及首次渲染

4.1 准备工作
- Vue 源码获取
- 源码目录结构
- 调试设置
- Vue 的不同构建版本
- 寻找入口文件
- 从入口开始
4.2 Vue初始化
- Vue 初始化过程
- 整理四个导出 Vue 的模块
- Vue 静态成员初始化
- Vue 实例成员初始化
- 实例成员 - init
- 实例成员 - initState
- 初始化过程调试
4.3 Vue首次渲染
- 首次渲染过程调试
- 首次渲染总结

Vue.js源码剖析-响应式原理会分为上中下三部分 —— (上)成员初始化及首次渲染

4.1 准备工作

Vue 源码获取

项目地址 https://github.com/vuejs/vue
Fork 一份到自己仓库，克隆到本地，可以自己写注释提交到 github
为什么分析 Vue 2.6
- 到目前为止 Vue 3.0 的正式版还没有发布
- 新版本发布后，现有项目不会升级到 3.0，2.x 还有很长的一段过渡期
- 3.0 项目地址：https://github.com/vuejs/vue-next

可以参考我 Fork 的源码，相较官网增加了一些额外的代码批注以及部分官方注释的翻译，文章未展示到的代码可以自己深入来看，另外用到案例也可以在其中获取

源码目录结构

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 		公共的代码

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

调试设置

打包

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

安装依赖

 npm i

设置 sourcemap

package.json 文件中的 dev 脚本中添加参数 --sourcemap 开启代码地图

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

执行 dev
- 首先我们先将 dist 目录删除，以便看得更清楚
- npm run dev 执行打包，用的是 rollup，-w 参数是监听文件的变化，文件变化自动重新打包；-c 是设置配置文；最后一个参数是配置环境变量，从而来打包生成不同版本的 vue
- 注意：Window 系统的朋友可能会遇到一个问题：

在这里，我初次从 github 将 vue 源代码 clone 下来，npm i 安装依赖之后执行 npm run dev 打包报出如上错误，而当我们查看文件我们发现并没有创建 dist 目录，这个错误大致的意思是找不到你的某个文件（文件不一定，之前遇到过core/index文件找不到）

我猜想这是因为 rollup 打包使用 rollup-plugin-alias 来处理一些常用的公共路径。但是在 win 环境下，这个别名的解析好像工作不正常，文件缺少了.js后缀导致识别不到文件，最简单的方式是下载此版本的 rollup-plugin-alias 并覆盖原文件，具体操作过程如下：

clone 仓库源码到本地
npm i 安装依赖
npm run build 编译
将编译后的 src/index.js 与 dist/rollup-plugin-alias.es2015.js 与 dist/rollup-plugin-alias.js 文件替换你从 vue 官网克隆下来的代码里 node_modules/rollup-plugin-alias 中的src 和 dist 内的内容
如果你感兴趣可以对比下二者的代码
此时再次运行 nom run dev 打包vue源码，如下图所示就证明打包成功了

此时 dist 目录重新生成内容如下，新增了 vue.js 和 vue.js.map

至于其他版本的js文件我们后续可以通过调用 npm run build 得到

调试

examples 的示例中引入的 vue.min.js 改为 vue.js
打开 Chrome 的调试工具中的 source
此时就可以看到源文件了

Vue 的不同构建版本

npm run build 重新打包所有文件

官方文档 - 对不同构建版本的解释
dist/README.md

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)	vue.min.js
Runtime-only (production)	vue.runtime.min.js

术语

完整版：同时包含编译器和运行时的版本
编译器：用来将模板字符串编译成为 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

// 
// Compiler
// 需要编译器，把 template 转换成 render 函数
const vm = new Vue({
     
  el: '#app',
  template: '{
     { msg }}
',
  data: {
     
    msg: 'Hello Vue'
  }
})

// 
// Runtime
// 不需要编译器
const vm = new Vue({
     
  el: '#app',
  // template: '{
     { msg }}
',
  render (h) {
     
    return h('h1', this.msg)
  },
  data: {
     
    msg: 'Hello Vue'
  }
})

推荐使用运行时版本，因为运行时版本相比完整版体积要小大约 30%
基于 Vue-CLI 创建的项目默认使用的是 vue.runtime.esm.js

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

通过查看 webpack 的配置文件
- 终端输入

vue inspect > output.js

// output.js
  resolve: {
     
    alias: {
     
	  ...
	  vue$: 'vue/dist/vue.runtime.esm.js'
	}
  }

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

寻找入口文件

查看 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

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

genConfig(name)
- 根据环境变量 TARGET 获取配置信息
- const opts = builds[name]
- 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
  },
}

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

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

const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {
     
  ...
  web: resolve('src/platforms/web'),
}

结果

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

从入口开始

src/platforms/web/entry-runtime-with-compiler.js

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

const vm = new Vue({
     
  el: '#app',
  template: 'Hello Template
',
  render(h) {
     
    return h('h1', 'Hello Render')
  }
})

阅读源码记录
- el 不能是 body 或者 html 标签
- 如果没有 render，把 template 转换成 render 函数
- 如果有 render 方法，直接调用 mount 挂载 DOM

// 保留 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  or  - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  // 把 template/el 转换成 render 函数
  if (!options.render) {
     
    ...
  }
  // 调用 mount 方法，渲染 DOM
  return mount.call(this, el, hydrating)
}

抛出问题：$mount 是谁调用的? 又是在什么位置？

调试代码的方法

注意：如果你最后执行了 npm run build操作，disy/vue.js 中的最后一行的 sourceMap 映射 //# sourceMappingURL=vue.js.map 会被清除，所以如果想在调试过程看到 src 源码，需要重新 npm run dev 开启代码地图。

调试代码examples/02-debug/index.html

在调用堆栈位置，我们可以看到方法调用的过程，当前执行的是 Vue.$mount 方法，再往下可以看到 Vue._init

Vue 构造函数

从而我们得知：$mount 是 _init() 调用的

同时也验证了开始的答案：如果 new Vue 同时设置了 template 和 render() ，此时只会执行 render()

Vue 的构造函数在哪？
Vue 实例的成员 / Vue 的静态成员从哪里来的？

4.2 Vue初始化

Vue 初始化过程

Vue 的构造函数在哪里

src/platform/web/entry-runtime-with-compiler.js 中引用了 ‘./runtime/index’

import Vue from './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)
}

src/platform/web/runtime/index.js 中引用了 ‘core/index’

import Vue from 'core/index'

src/core/index.js
- 定义了 Vue 的静态方法
- initGlobalAPI(Vue)
src/core/index.js 中引用了 ‘./instance/index’

import Vue from './instance/index'

src/core/instance/index.js
- 定义了 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)

export default Vue

整理四个导出 Vue 的模块

src/platforms/web/entry-runtime-with-compiler.js
- web 平台相关的入口
- 重写了平台相关的 $mount()方法
- 注册了 Vue.compile() 方法，传递一个 HTML 字符串返回 render 函数
src/platform/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 静态成员初始化

通过 src/core/index.js 的 initGlobalAPI(Vue) 来到 初始化 Vue 的静态方法 所在文件

import {
      initGlobalAPI } from './global-api/index'
...
// 注册 Vue 的静态属性/方法
initGlobalAPI(Vue)

src/core/global-api/index.js
- 初始化 Vue 的静态方法
  - initUse() : src/core/global-api/use.js
  - initMixin() : src/core/global-api/mixin.js
  - initExtend() : src/core/global-api/extend.js
  - initAssetRegisters() : src/core/global-api/assets.js
- 可参考 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)
}

Vue 实例成员初始化

src/core/instance/index.js
- 定义 Vue 的构造函数
- 初始化 Vue 的实例成员
  - initMixin() : src/core/instance/init.js
  - stateMixin() : src/core/instance/state.js
  - eventsMixin() : src/core/instance/state.js
  - lifecycleMixin() : src/core/instance/state.js
  - renderMixin() : src/core/instance/state.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)

实例成员 - init

initMixin(Vue)
- 注册 vm 的 _init() 方法，初始化 vm
- src/core/instance/init.js
- 可参考 Vue 实例文档

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

实例成员 - initState

initState(vm)
- 初始化 vm 的 _props/methods/_data/computed/watch
- src/core/instance/state.js
- 可参考 Vue 实例文档

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：ssrc/core/instance/index.js
断点2：src/core/index.js
断点3：src/platforms/web/runtime/index.js
断点4：src/platforms/web/entry-runtime-with-compiler.js

开始调试

F5 进入断点
首先进入core/instance/index.js，它是与平台无关的，在这里调用了Mixin的一些函数，这些函数里面给Vue的原型上增加了一些实例成员
此时我们来监视这些函数执行完毕后Vue身上发生的一些变化
F10 跳过函数 initMixin，新增_init()
继续，跳过函数 stateMixin()，新增 $data / $props / $set / $delete / $watch 几个成员。但是 $data 和 $props 此时都是 undefined，仅仅初始化了这两个属性，将来需要通过选项去赋值
接下来调用函数 eventsMixin()，初始化事件相关的四个方法 $on / $once / $off / $emit
再调用函数 lifecycleMixin()，它注册了根生命周期相关的方法 _update / $forceUpdate / $destroy。其中_updata内部调用了 patch 方法，把 VNode 渲染成真实的 DOM
最后调用函数renderMixin()，其执行过后，会给原型挂载一些 _ 开头的方法，这些方法的作用是当我们把模板转换成 render函数的时候，在render函数中调用，除此之外还注册了 $nextTick / _render, _render的作用是调用用户定义或模板渲染的render函数
F8 跳转到下一个导出Vue的文件core/index.js，这个文件中执行了 initGlobalAPI()，给Vue的构造函数初始化了静态成员
F11进入 initGlobalAPI()，F10执行到初始化 Vue.config 对象的地方，Vue的构造函数新增 config属性，这是一个对象，并且这个对象已经初始化了很多内容，这些内容是通过给config对象增加一个get方法，在get方法中返回了../config中导入的config
继续F10执行三个静态方法 set / delete / nextTick
F10 初始化 observable
继续F10 初始化 options对象，但此时options对象为空，因为是通过Object.create(null)来初始化的，没有原型，继续F10 增添全局组件、指令以及过滤器 components / directives / filters，再F10初始化_base即Vue
F10为options.compents设置keep-alive组件
F10 初始化静态方法 Vue.use()、Vue.mixin()、Vue.extend()。以及Vue.directive()、Vue.component()、Vue.filter()，它们是用来注册全局的指令、组件和过滤器，我们调用这些方法的时候，它们会把指令、组件和过滤器分别帮我们注册到Vue.options中对应的属性里面来
再按F8进入platforms/web/runtime/index.js，此时我们看到的代码都是与平台相关的，它首先给Vue.config中注册了一些与平台相关的一些公共的方法，当它执行完过后又注册了几个与平台相关的指令和组件
F10将其执行完观察指令和组件的变化
继续F10给Vue原型上注册了patch和$mount，其执行是在Vue._init中调用的
F8 进入到最后一个文件platforms/web/runtime/entry-runtime-with-compiler.js的断点，这个文件重写了$mount，新增了把模板编译成render函数的功能
在文件最后给Vue构造函数挂载了compile方法，这个方法的作用是让我们手共把模板转换成render函数

4.3 Vue首次渲染

首次渲染过程调试

Vue 初始化完毕，开始真正的执行
调用 new Vue() 之前，已经初始化完毕
通过调试代码，记录首次渲染过程