每个Vue应用都是从创建Vue实例开始的，这里我们就以一个简单的例子为基础，慢慢深究Vue的实现细节。

<div id="app">{{ a }}</div>
var vm = new Vue({
  el: '#app',
  data: { a: 1 }
})

当我们重新设置a属性时（vm.a = 2），视图上显示的值也会变成2。这么简单的例子大家都知道啦，现在就看看使用Vue构造函数初始化的时候都发生了什么。

打开/src/core/instance/index.js文件，看到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')
  }
  this._init(options)
}

由此可知首先执行了this._init(options)代码，_init方法在 src/core/instance/init.js文件中被添加到了Vue原型上，我们看看该方法做了什么。

const vm: Component = this
// a uid
vm._uid = uid++

首先是定义了vm，它的值就是this，即当前实例。接着定义了一个实例属性_uid，它是Vue组件的唯一标识，每实例化一个Vue组件就会递增。

接下来是在非生产环境下可以测试性能的一段代码：

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

...

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

省略了中间的代码。这段代码的执行条件是：非生产环境，config.performance为true 和 mark都存在的情况下。官方提供了performance的全局API。mark和measure在core/util/perf.js文件中，其实就是window.performance.mark和window.performance.measure. 组件初始化的性能追踪就是在代码的开头和结尾分别用mark打上标记，然后通过measure函数对两个mark进行性能计算。

再看看中间代码，也就是被性能追踪的代码：

// a flag to avoid this being observed
vm._isVue = true
// 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.
    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
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

先是设置了_isVue实例属性，作为一个标志避免Vue实例被响应系统观测。

接下来是合并选项的处理，我们并没有使用_isComponent属性，所以上面的代码会走else分支，挂载了实例属性$options, 该属性的生成通过调用了mergeOptions方法，接下来我们看看mergeOptions方法都干了些什么。

mergeOptions 函数来自于 core/util/options.js 文件, 该函数接受三个参数。先来看一下_init函数中调用该函数时传递的参数分别是什么。

vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor), options || {}, vm)

后两个参数都好理解，options是我们实例化时传过来的参数

{
  el: '#app',
  data: { a: 1 }
}

vm就是当前实例。

重点看一下第一个参数，是调用方法生成的resolveConstructorOptions(vm.constructor)

export function resolveConstructorOptions (Ctor: Class<Component>) {
  let options = Ctor.options
  if (Ctor.super) {
    const superOptions = resolveConstructorOptions(Ctor.super)
    const cachedSuperOptions = Ctor.superOptions
    if (superOptions !== cachedSuperOptions) {
      // super option changed,
      // need to resolve new options.
      Ctor.superOptions = superOptions
      // check if there are any late-modified/attached options (#4976)
      const modifiedOptions = resolveModifiedOptions(Ctor)
      // update base extend options
      if (modifiedOptions) {
        extend(Ctor.extendOptions, modifiedOptions)
      }
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
      if (options.name) {
        options.components[options.name] = Ctor
      }
    }
  }
  return options
}

传的参数是vm.constructor，在我们例子中就是Vue构造函数，因为我们是直接调用的Vue创建的实例。那什么时候不是Vue构造函数呢，在用Vue.extend()去创建子类，再用子类构造实例的时候，vm.constructor就是子类而不是Vue构造函数了。例如在官方文档上的例子：

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

vm.constructor就是Profile。

再看if语句块，是在Ctor.super为真的情况下执行，super是子类才有的属性，所以在我们的例子中是不执行的，直接返回options，即Vue.options, 它的值如下：

Vue.options = {
    components: {
        KeepAlive
        Transition,
        TransitionGroup
    },
    directives:{
        model,
        show
    },
    filters: Object.create(null),
    _base: Vue
}

不记得options是如何形成的可以看一下Vue源码解析一——骨架梳理。现在三个参数已经搞清楚了，就来看看mergeOptions方法发生了什么吧。

检查组件名是否合法

mergeOptions方法在core/util/options.js文件中，我们找到该方法，首先看一下方法上方的注释：

/**
 * Merge two option objects into a new one.
 * Core utility used in both instantiation and inheritance.
 */

合并两个选项对象为一个新的对象。在实例化和继承中使用的核心实用程序。实例化就是调用_init方法的时候，继承也就是使用Vue.extend的时候。现在我们知道了该方法的作用，就来看一下该方法的具体实现吧

if (process.env.NODE_ENV !== 'production') {
    checkComponents(child)
}

在非生产环境下，会去校验组件的名字是否合法，checkComponents函数就是用来干这个的，该函数也在当前文件中，找到该函数：

/**
 * Validate component names
 */
function checkComponents (options: Object) {
  for (const key in options.components) {
    validateComponentName(key)
  }
}

一个for in循环遍历options.components，以子组件的名字为参数调用validateComponentName方法，所以该方法才是检测组件名是否合法的具体实现。源码如下：

export function validateComponentName (name: string) {
  if (!new RegExp(`^[a-zA-Z][\\-\\.0-9_${unicodeLetters}]*$`).test(name)) {
    warn(
      'Invalid component name: "' + name + '". Component names ' +
      'should conform to valid custom element name in html5 specification.'
    )
  }
  if (isBuiltInTag(name) || config.isReservedTag(name)) {
    warn(
      'Do not use built-in or reserved HTML elements as component ' +
      'id: ' + name
    )
  }
}

该方法由两个if语句块组成，要想组件名合法，必须满足这两个if条件：

1. 正则表达式/^[a-zA-Z][\\-\\.0-9_${unicodeLetters}]*$/
2. isBuiltInTag(name) || config.isReservedTag(name) 条件不成立

对于条件一就是要使用符合html5规范中的有效自定义元素名称

条件二是使用了两个方法来检测的，isBuiltInTag方法用来检测是否是内置标签，在shared/util.js文件中定义

/**
 * Check if a tag is a built-in tag.
 */
export const isBuiltInTag = makeMap('slot,component', true)

isBuiltInTag方法是调用makeMap()生成的，看一下makeMap的定义：

/**
 * Make a map and return a function for checking if a key
 * is in that map.
 */
export function makeMap (
  str: string,
  expectsLowerCase?: boolean
): (key: string) => true | void {
  const map = Object.create(null)
  const list: Array<string> = str.split(',')
  for (let i = 0; i < list.length; i++) {
    map[list[i]] = true
  }
  return expectsLowerCase
    ? val => map[val.toLowerCase()]
    : val => map[val]
}

该方法最后返回一个函数，函数接收一个参数，如果参数在map中就返回true，否则返回undefined。map是根据调用makeMap方法时传入的参数生成的，按照来处来看，也就是

map = { slot: true, component: true }

由此可知slot 和 component 是作为Vue的内置标签而存在的，我们的组件命名不能使用它们。

还有一个方法config.isReservedTag在core/config.js文件中定义，在platforms/web/runtime/index.js文件中被覆盖

Vue.config.isReservedTag = isReservedTag

isReservedTag方法在platforms/web/util/element.js文件中，

export const isReservedTag = (tag: string): ?boolean => {
  return isHTMLTag(tag) || isSVG(tag)
}

就是检测是否是规定的html标签和svg标签。到此组件名是否合法的检测就结束了。

if (typeof child === 'function') {
    child = child.options
}

这里是一个判断，如果child是一个function，就取它的options静态属性。什么函数具有options属性呢？Vue构造函数和使用Vue.extend()创建的'子类'，这就允许我们在进行选项合并的时候，去合并一个 Vue 实例构造者的选项了。

规范化Props

normalizeProps(child, vm)
normalizeInject(child, vm)
normalizeDirectives(child)

这是三个规范化选项的函数调用，分别是针对props, inject, directives。为什么会有规范化选项这一步呢？因为我们在使用选项的时候可以有多种不同的用法，比如props, 既可以是字符串数组也可以是对象：

props: ['test1', 'test2']

props: {
    test1: String,
    test2: {
        type: String,
        default: ''
    }
}

这方便了我们使用，但是Vue要对选项进行处理，多种形式定然增加了复杂度，所以要处理成一种格式，这就是该函数的作用。

我们分别来看具体是怎么规范化的，首先是函数normalizeProps:

/**
 * Ensure all props option syntax are normalized into the
 * Object-based format.
 */
function normalizeProps (options: Object, vm: ?Component) {
  const props = options.props
  if (!props) return
  const res = {}
  let i, val, name
  if (Array.isArray(props)) {
    
  } else if (isPlainObject(props)) {
    
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      `Invalid value for option "props": expected an Array or an Object, ` +
      `but got ${toRawType(props)}.`,
      vm
    )
  }
  options.props = res
}

根据注释我们知道props最后被规范成对象的形式了。先大体看一下函数的结构：

• 先是判断props是否存在，如果不存在直接返回
• if语句处理数组props
• else if语句块处理对象props
• 最后如果既不是数组也不对象，还不是生成环境，就发出类型错误的警告

数组类型的props是如何处理的呢？看一下代码：

i = props.length
while (i--) {
    val = props[i]
    if (typeof val === 'string') {
        name = camelize(val)
        res[name] = { type: null }
    } else if (process.env.NODE_ENV !== 'production') {
        warn('props must be strings when using array syntax.')
    }
}

使用while循环处理每一项，如果是字符串，先用camelize函数转了一下该字符串，然后存储在了res中，其值是{ type: null } 。camelize函数定义在shared/util.js中，其作用就是把连字符格式的字符串转成驼峰式的。比如：

test-a // testA

如果不是字符串类型就发出警告，所以数组格式的props中元素必须是字符串。

数组格式的规范化我们已经了解了，如果我们传的是

props: ['test-a', 'test2']

规范化之后就变成：

props: {
    testA: { type: null },
    test2: { type: null }
}

再来看看对象props是如何规范化的：

for (const key in props) {
    val = props[key]
    name = camelize(key)
    res[name] = isPlainObject(val)
        ? val
        : { type: val }
}

我们之前举例说过props是对象的话它的属性值有两种写法，一种属性值直接是类型，还有一种属性值是对象。这里的处理是如果是对象的不做处理，是类型的话就把它作为type的值。所以如果我们传的是：

props: {
    test1: String,
    test2: {
        type: String,
        default: ''
    }
}

规范化之后变成：

props: {
    test1: { type: String },
    test2: {
        type: String,
        default: ''
    }
}

这样我们就了解了Vue是如何规范化Props的了

规范化inject

inject选项不常使用，我们先来看看官方文档的介绍

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

在子组件中并没有定义foo属性却可以使用，就是因为使用inject注入了这个属性，而这个属性的值是来源于父组件。和props一样，inject既可以是数组也可以是对象：

inject: ['foo']
inject: { foo },
inject: {
    bar: {
        from: 'foo',
        default: '--'
    }
}

为了方便处理，Vue也把它规范成了一种格式，就是对象：

/**
 * Normalize all injections into Object-based format
 */
function normalizeInject (options: Object, vm: ?Component) {
  const inject = options.inject
  if (!inject) return
  const normalized = options.inject = {}
  if (Array.isArray(inject)) {
    
  } else if (isPlainObject(inject)) {
    
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      `Invalid value for option "inject": expected an Array or an Object, ` +
      `but got ${toRawType(inject)}.`,
      vm
    )
  }
}

函数开头首先判断inject属性是否存在，如果没有传就直接返回。

接着是数组类型的处理

for (let i = 0; i < inject.length; i++) {
    normalized[inject[i]] = { from: inject[i] }
}

for循环遍历整个数组，将元素的值作为key，{ from: inject[i] }作为值。所以如果是

inject: ['foo']

规范化之后：

inject: { foo: { from: 'foo' } }

然后是处理对象类型的inject：

for (const key in inject) {
    const val = inject[key]
    normalized[key] = isPlainObject(val)
        ? extend({ from: key }, val)
        : { from: val }
}

使用for in循环遍历对象，依然使用原来的key作为key，值的话要处理一下，如果原来的值是对象，就用extend函数把{ from: key }和val混合一下，否则就用val作为from的值。

所以如果我们传入的值是：

inject: {
    foo,
    bar: {
        from: 'foo',
        default: '--'
    }
}

处理之后变成：

inject: {
    foo: { from: 'foo' },
    bar: {
        from: 'foo',
        default: '--'
    }
}

最后，如果传入的既不是数组也不是对象，在非生产环境下就会发出警告。

规范化Directives

/**
 * Normalize raw function directives into object format.
 */
function normalizeDirectives (options: Object) {
  const dirs = options.directives
  if (dirs) {
    for (const key in dirs) {
      const def = dirs[key]
      if (typeof def === 'function') {
        dirs[key] = { bind: def, update: def }
      }
    }
  }
}

根据官方文档自定义指令的介绍，我们知道注册指令有函数和对象两种形式：

directives: {
    'color-swatch': function (el, binding) {
        el.style.backgroundColor = binding.value
    },
    'color-swatch1': {
        bind: function (el, binding) {
            el.style.backgroundColor = binding.value
        }
    }
}

该方法就是要把第一种规范化成对象。

看一下方法体，for in 循环遍历所有指令，如果值是函数类型，则把该值作为bind和update属性的值。所以第一种形式规范化之后就变成：

directives: {
    'color-swatch': {
        bind: function (el, binding) {
            el.style.backgroundColor = binding.value
        },
        update: function (el, binding) {
            el.style.backgroundColor = binding.value
        }
    }
}

现在我们就了解了三个用于规范化选项的函数的作用了。

规范化选项之后是这样一段代码：

// Apply extends and mixins on the child options,
// but only if it is a raw options object that isn't
// the result of another mergeOptions call.
// Only merged options has the _base property.
if (!child._base) {
    if (child.extends) {
      parent = mergeOptions(parent, child.extends, vm)
    }
    if (child.mixins) {
      for (let i = 0, l = child.mixins.length; i < l; i++) {
        parent = mergeOptions(parent, child.mixins[i], vm)
      }
    }
}

当child是原始选项对象即没有_base属性时，进行extends和mixins选项的处理。

如果child.extends存在，就递归调用mergeOptions函数将parent和child.extends进行合并，并将返回值赋给parent。

如果child.mixins存在，for循环遍历child.mixins，也是递归调用mergeOptions函数将parent和每一项元素进行合并，并更新parent。

mergeOptions函数我们还没有看完，先继续往下看，这里造成的影响先不追究。之前所做的处理都是前奏，还没有涉及选项合并，是为选项合并所做的铺垫。接下来我们来看选项合并的处理