Vue源码分析—前置知识

在分析Vue的源码之前我们需要了解一些前置知识，如Flow、源码目录、构建方式、编译入口等。

认识 Flow

Flow 是facebook出品的JavaScript静态类型检查工具。Vue.js的源码利用了Flow做了静态类型检查，所以了解Flow有助于我们阅读源码。

为什么用Flow

JavaScript是动态类型语言，它的灵活性有目共睹，但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码，在编译期甚至看上去都不会报错，但在运行阶段就可能出现各种奇怪的BUG。

类型检查是当前动态类型语言的发展趋势，所谓类型检查，就是在编译期尽早发现（由类型错误引起的）BUG，又不影响代码运行（不需要运行时动态检查类型），使编写JavaScript具有和编写Java等强类型语言相近的体验。

项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。 Vue.js在做2.0重构的时候，在ES2015的基础上，除了ESLint保证代码风格之外，也引入了Flow做静态类型检查。之所以选择Flow，主要是因为Babel和ESLint都有对应的Flow插件以支持语法，可以完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力。

Flow的工作方式

通常类型检查分成 2 种方式：

类型推断：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型。
类型注释：事先注释好我们期待的类型，Flow会基于这些注释来判断。

类型推断

它不需要任何代码修改即可进行类型检查，最小化开发者的工作量。它不会强制你改变开发习惯，因为它会自动推断出变量的类型。这就是所谓的类型推断，Flow最重要的特性之一。

/*@flow*/
function split(str) {
  return str.split(' ')
}
split(11)

Flow检查上述代码后会报错，因为函数split期待的参数是字符串，而我们输入了数字。

类型注释

类型推断不需要编写类型注释就能获取有用的反馈。但在某些特定的场景下，添加类型注释可以提供更好更明确的检查依据。

/*@flow*/
function add(x, y){
  return x + y
}
add('Hello', 11)

Flow检查上述代码时检查不出任何错误，因为从语法层面考虑， +既可以用在字符串上，也可以用在数字上，我们并没有明确指出add()的参数必须为数字。
在这种情况下，我们可以借助类型注释来指明期望的类型。类型注释是以冒号:开头，可以在函数参数，返回值，变量声明中使用。
如果我们在上段代码中添加类型注释，就会变成如下：

/*@flow*/
function add(x: number, y: number): number {
  return x + y
}
add('Hello', 11)

现在Flow就能检查出错误，因为函数参数的期待类型为数字，而我们提供了字符串。
上面的例子是针对函数的类型注释。接下来我们来看看Flow能支持的一些常见的类型注释。

数组

/*@flow*/
var arr: Array = [1, 2, 3]
arr.push('Hello')

数组类型注释的格式是Array，T表示数组中每项的数据类型。在上述代码中，arr是每项均为数字的数组。如果我们给这个数组添加了一个字符串，Flow能检查出错误。

类和对象

/*@flow*/
class Bar {
  x: string;           // x 是字符串
  y: string | number;  // y 可以是字符串或者数字
  z: boolean;

  constructor(x: string, y: string | number) {
    this.x = x
    this.y = y
    this.z = false
  }
}

var bar: Bar = new Bar('hello', 4)

var obj: { a: string, b: number, c: Array, d: Bar } = {
  a: 'hello',
  b: 11,
  c: ['hello', 'world'],
  d: new Bar('hello', 3)
}

类的类型注释格式如上，可以对类自身的属性做类型检查，也可以对构造函数的参数做类型检查。
对象的注释类型类似于类，需要指定对象属性的类型。

Null

若想任意类型T可以为null或者undefined，只需类似如下写成?T的格式即可。

/*@flow*/
var foo: ?string = null

此时，foo 可以为字符串，也可以为 null。

Flow在Vue.js源码中的应用

有时候我们想引用第三方库，或者自定义一些类型，但Flow并不认识，因此检查的时候会报错。为了解决这类问题，Flow提出了一个libdef的概念，可以用来识别这些第三方库或者是自定义类型，而Vue.js也利用了这一特性。

在Vue.js的主目录下有.flowconfig文件，它是Flow的配置文件。这其中的[libs]部分用来描述包含指定库定义的目录，默认是名为flow-typed的目录。
这里[libs]配置的是flow，表示指定的库定义都在flow文件夹内。我们打开这个目录，会发现文件如下：

flow
├── compiler.js        # 编译相关
├── component.js       # 组件数据结构
├── global-api.js      # Global API 结构
├── modules.js         # 第三方库定义
├── options.js         # 选项相关
├── ssr.js             # 服务端渲染相关
├── vnode.js           # 虚拟 node 相关

可以看到，Vue.js有很多自定义类型的定义，在阅读源码的时候，如果遇到某个类型并想了解它完整的数据结构的时候，可以回来翻阅这些数据结构的定义。

通过对Flow的认识，有助于我们阅读Vue的源码，并且这种静态类型检查的方式非常有利于大型项目源码的开发和维护。类似Flow的工具还有如TypeScript。

Vue.js源码目录设计

Vue.js的源码都在src目录下，其目录结构如下。

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

compiler

compiler目录包含Vue.js所有编译相关的代码。它包括把模板解析成ast语法树，ast语法树优化，代码生成等功能。
编译的工作可以在构建时做（借助webpack、vue-loader等辅助插件）；也可以在运行时做，使用包含构建功能的Vue.js。显然，编译是一项耗性能的工作，所以更推荐前者——离线编译。

core

core目录包含了Vue.js的核心代码，包括内置组件、全局API封装，Vue实例化、观察者、虚拟DOM、工具函数等等。

platform

Vue.js是一个跨平台的MVVM框架，它可以跑在web上，也可以配合weex跑在native客户端上。platform是Vue.js的入口，2个目录代表2个主要入口，分别打包成运行在web上和weex上的Vue.js。

server

Vue.js 2.0支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。注意：这部分代码是跑在服务端的Node.js，不要和跑在浏览器端的Vue.js混为一谈。
服务端渲染主要的工作是把组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

sfc

通常我们开发Vue.js都会借助webpack构建，然后通过.vue单文件来编写组件。
这个目录下的代码逻辑会把.vue文件内容解析成一个JavaScript的对象。

shared

Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的Vue.js和服务端的 Vue.js 所共享的。

从Vue.js的目录设计可以看到，作者把功能模块拆分的非常清楚，相关的逻辑放在一个独立的目录下维护，并且把复用的代码也抽成一个独立目录。
这样的目录设计让代码的阅读性和可维护性都变强，是非常值得学习和推敲的。

Vue.js源码构建

Vue.js源码是基于Rollup构建的，它的构建相关配置都在`scripts目录下。

构建脚本

通常一个基于NPM托管的项目都会有一个package.json文件，它是对项目的描述文件，它的内容实际上是一个标准的JSON对象。
我们通常会配置script字段作为NPM的执行脚本，Vue.js源码构建的脚本如下：

{
  "script": {
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex"
  }
}

这里总共有3条命令，作用都是构建Vue.js，后面2条是在第一条命令的基础上，添加一些环境参数。
当在命令行运行npm run build的时候，实际上就会执行node scripts/build.js，接下来我们来看看它实际是怎么构建的。

构建过程

我们对于构建过程分析是基于源码的，先打开构建的入口JS文件，在scripts/build.js中：

let builds = require('./config').getAllBuilds()

// filter builds via command line arg
if (process.argv[2]) {
  const filters = process.argv[2].split(',')
  builds = builds.filter(b => {
    return filters.some(f => b.output.file.indexOf(f) > -1 || b._name.indexOf(f) > -1)
  })
} else {
  // filter out weex builds by default
  builds = builds.filter(b => {
    return b.output.file.indexOf('weex') === -1
  })
}

build(builds)

这段代码逻辑非常简单，先从配置文件读取配置，再通过命令行参数对构建配置做过滤，这样就可以构建出不同用途的Vue.js了。接下来我们看一下配置文件，在scripts/config.js中：

const builds = {
  // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
  'web-runtime-cjs': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.common.js'),
    format: 'cjs',
    banner
  },
  // Runtime+compiler CommonJS build (CommonJS)
  'web-full-cjs': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.common.js'),
    format: 'cjs',
    alias: { he: './entity-decoder' },
    banner
  },
  // Runtime only (ES Modules). Used by bundlers that support ES Modules,
  // e.g. Rollup & Webpack 2
  'web-runtime-esm': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.esm.js'),
    format: 'es',
    banner
  },
  // Runtime+compiler CommonJS build (ES Modules)
  'web-full-esm': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.esm.js'),
    format: 'es',
    alias: { he: './entity-decoder' },
    banner
  },
  // runtime-only build (Browser)
  'web-runtime-dev': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.js'),
    format: 'umd',
    env: 'development',
    banner
  },
  // runtime-only production build (Browser)
  'web-runtime-prod': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.min.js'),
    format: 'umd',
    env: 'production',
    banner
  },
  // 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
  },
  // Runtime+compiler production build  (Browser)
  'web-full-prod': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.min.js'),
    format: 'umd',
    env: 'production',
    alias: { he: './entity-decoder' },
    banner
  },
  // ...
}

对于单个配置，它是遵循Rollup的构建规则的。其中entry属性表示构建的入口JS文件地址，dest属性表示构建后的JS文件地址。format属性表示构建的格式，cjs表示构建出来的文件遵循CommonJS规范，es表示构建出来的文件遵循ES Module规范。 umd表示构建出来的文件遵循UMD规范。
以web-runtime-cjs配置为例，它的entry是resolve('web/entry-runtime.js')，先来看一下resolve函数的定义。
源码目录：scripts/config.js

const aliases = require('./alias')
const resolve = p => {
  const base = p.split('/')[0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1))
  } else {
    return path.resolve(__dirname, '../', p)
  }
}

这里的resolve函数实现非常简单，它先把resolve函数传入的参数p通过/做了分割成数组，然后取数组第一个元素设置为base。在我们这个例子中，参数p是web/entry-runtime.js，那么base则为web。base并不是实际的路径，它的真实路径借助了别名的配置，我们来看一下别名配置的代码，在scripts/alias中：

const path = require('path')

module.exports = {
  vue: path.resolve(__dirname, '../src/platforms/web/entry-runtime-with-compiler'),
  compiler: path.resolve(__dirname, '../src/compiler'),
  core: path.resolve(__dirname, '../src/core'),
  shared: path.resolve(__dirname, '../src/shared'),
  web: path.resolve(__dirname, '../src/platforms/web'),
  weex: path.resolve(__dirname, '../src/platforms/weex'),
  server: path.resolve(__dirname, '../src/server'),
  entries: path.resolve(__dirname, '../src/entries'),
  sfc: path.resolve(__dirname, '../src/sfc')
}

很显然，这里web对应的真实的路径是path.resolve(__dirname, '../src/platforms/web')，这个路径就找到了Vue.js源码的web目录。然后resolve函数通过path.resolve(aliases[base], p.slice(base.length + 1))找到了最终路径，它就是Vue.js源码web目录下的entry-runtime.js。因此，web-runtime-cjs配置对应的入口文件就找到了。

它经过Rollup的构建打包后，最终会在dist目录下生成vue.runtime.common.js。

Runtime Only VS Runtime + Compiler

通常我们利用vue-cli去初始化我们的Vue.js项目的时候会询问我们用Runtime Only版本的还是Runtime + Compiler版本。下面我们来对比这两个版本。

Runtime Only
我们在使用Runtime Only版本的Vue.js的时候，通常需要借助如webpack的vue-loader工具把.vue文件编译成JavaScript，因为是在编译阶段做的，所以它只包含运行时的Vue.js代码，因此代码体积也会更轻量。
Runtime + Compiler
我们如果没有对代码做预编译，但又使用了Vue的template属性并传入一个字符串，则需要在客户端编译模板，如下所示：

// 需要编译器的版本
new Vue({
  template: '{{ hi }}'
})
// 这种情况不需要
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

因为在Vue.js 2.0中，最终渲染都是通过render函数，如果写template属性，则需要编译成render函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本。
很显然，这个编译过程对性能会有一定损耗，所以通常我们更推荐使用Runtime-Only的 Vue.js。

从入口开始

在web应用下，我们来分析Runtime + Compiler构建出来的Vue.js，它的入口是src/platforms/web/entry-runtime-with-compiler.js：

/* @flow */

import config from 'core/config'
import { warn, cached } from 'core/util/index'
import { mark, measure } from 'core/util/perf'

import Vue from './runtime/index'
import { query } from './util/index'
import { compileToFunctions } from './compiler/index'
import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'

const idToTemplate = cached(id => {
  const el = query(id)
  return el && el.innerHTML
})

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  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
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)
}

/**
 * Get outerHTML of elements, taking care
 * of SVG elements in IE as well.
 */
function getOuterHTML (el: Element): string {
  if (el.outerHTML) {
    return el.outerHTML
  } else {
    const container = document.createElement('div')
    container.appendChild(el.cloneNode(true))
    return container.innerHTML
  }
}

Vue.compile = compileToFunctions

export default Vue

那么，当我们的代码执行import Vue from 'vue'的时候，就是从这个入口执行代码来初始化Vue，那么Vue到底是什么，它是怎么初始化的，我们来一探究竟。

Vue 的入口

在这个入口JS的上方我们可以找到Vue的来源：import Vue from './runtime/index'，我们先来看一下这块儿的实现，它定义在src/platforms/web/runtime/index.js中：

import Vue from 'core/index'
import config from 'core/config'
import { extend, noop } from 'shared/util'
import { mountComponent } from 'core/instance/lifecycle'
import { devtools, inBrowser, isChrome } from 'core/util/index'

import {
  query,
  mustUseProp,
  isReservedTag,
  isReservedAttr,
  getTagNamespace,
  isUnknownElement
} from 'web/util/index'

import { patch } from './patch'
import platformDirectives from './directives/index'
import platformComponents from './components/index'

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

// ...

export default Vue

这里关键的代码是import Vue from 'core/index'，之后的逻辑都是对Vue这个对象做一些扩展，可以先不用看，我们来看一下真正初始化Vue的地方，在src/core/index.js中：

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'

initGlobalAPI(Vue)

Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})

Object.defineProperty(Vue.prototype, '$ssrContext', {
  get () {
    /* istanbul ignore next */
    return this.$vnode && this.$vnode.ssrContext
  }
})

// expose FunctionalRenderContext for ssr runtime helper installation
Object.defineProperty(Vue, 'FunctionalRenderContext', {
  value: FunctionalRenderContext
})

Vue.version = '__VERSION__'

export default Vue

这里有2处关键的代码，import Vue from './instance/index'和initGlobalAPI(Vue)，初始化全局Vue API），我们先来看第一部分，在src/core/instance/index.js中：

Vue 的定义

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

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

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

在这里，我们终于看到了Vue的庐山真面目，它实际上就是一个用Function实现的类，我们只能通过new Vue去实例化它。
为何Vue不用ES6的Class去实现呢？我们往后看这里有很多xxxMixin的函数调用，并把Vue当参数传入，它们的功能都是给Vue的prototype上扩展一些方法，Vue按功能把这些扩展分散到多个模块中去实现，而不是在一个模块里实现所有，这种方式是用Class难以实现的。这么做的好处是非常方便代码的维护和管理，这种编程技巧也非常值得我们去学习。

initGlobalAPI

Vue.js在整个初始化过程中，除了给它的原型prototype上扩展方法，还会给Vue这个对象本身扩展全局的静态方法，它的定义在src/core/global-api/index.js中：

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  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.
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  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.
  Vue.options._base = Vue

  extend(Vue.options.components, builtInComponents)

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}

这里就是在Vue上扩展的一些全局方法的定义。有一点要注意的是，Vue.util暴露的方法最好不要依赖，因为它可能经常会发生变化，是不稳定的。