合并配置
new Vue的过程通常有2种场景，一种是外部我们的代码主动调用new Vue(options)的方式实例化一个Vue对象；另一种是内部通过new Vue(options)实例化子组件。
无论哪种场景，都会执行实例的_init(options)方法，它首先会执行一个merge options的逻辑，相关的代码在src/core/instance/init.js中：
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.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
// ...
}
可以看到不同场景对于options的合并逻辑是不一样的，并且传入的options值也有非常大的不同，接下来分开介绍2种场景的options合并过程。
为了更直观，我们可以举个简单的示例：
import Vue from 'vue'
let childComp = {
template: '{{msg}}',
created() {
console.log('child created')
},
mounted() {
console.log('child mounted')
},
data() {
return {
msg: 'Hello Vue'
}
}
}
Vue.mixin({
created() {
console.log('parent created')
}
})
let app = new Vue({
el: '#app',
render: h => h(childComp)
})
外部调用场景
当执行new Vue的时候，在执行this._init(options)的时候，就会执行如下逻辑去合并options：
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
这里通过调用mergeOptions方法来合并，它实际上就是把resolveConstructorOptions(vm.constructor)的返回值和options做合并，resolveConstructorOptions的实现先不考虑，在我们这个场景下，它还是简单返回vm.constructor.options，相当于Vue.options，那么这个值又是什么呢，其实在initGlobalAPI(Vue) 的时候定义了这个值，代码在src/core/global-api/index.js中：
export function initGlobalAPI (Vue: GlobalAPI) {
// ...
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)
// ...
}
首先通过Vue.options = Object.create(null)创建一个空对象，然后遍历ASSET_TYPES，ASSET_TYPES的定义在src/shared/constants.js中：
export const ASSET_TYPES = [
'component',
'directive',
'filter'
]
所以上面遍历ASSET_TYPES后的代码相当于：
Vue.options.components = {}
Vue.options.directives = {}
Vue.options.filters = {}
接着执行了Vue.options._base = Vue。
最后通过extend(Vue.options.components, builtInComponents)把一些内置组件扩展到Vue.options.components上，Vue的内置组件目前有
那么回到mergeOptions这个函数，它的定义在src/core/util/options.js中：
/**
* Merge two option objects into a new one.
* Core utility used in both instantiation and inheritance.
*/
export function mergeOptions (
parent: Object,
child: Object,
vm?: Component
): Object {
if (process.env.NODE_ENV !== 'production') {
checkComponents(child)
}
if (typeof child === 'function') {
child = child.options
}
normalizeProps(child, vm)
normalizeInject(child, vm)
normalizeDirectives(child)
const extendsFrom = child.extends
if (extendsFrom) {
parent = mergeOptions(parent, extendsFrom, vm)
}
if (child.mixins) {
for (let i = 0, l = child.mixins.length; i < l; i++) {
parent = mergeOptions(parent, child.mixins[i], vm)
}
}
const options = {}
let key
for (key in parent) {
mergeField(key)
}
for (key in child) {
if (!hasOwn(parent, key)) {
mergeField(key)
}
}
function mergeField (key) {
const strat = strats[key] || defaultStrat
options[key] = strat(parent[key], child[key], vm, key)
}
return options
}
mergeOptions主要功能就是把parent和child这两个对象根据一些合并策略，合并成一个新对象并返回。比较核心的几步，先递归把extends 和 mixins 合并到parent上，然后遍历parent，调用mergeField，然后再遍历child，如果key不在parent的自身属性上，则调用mergeField。
这里有意思的是mergeField函数，它对不同的key有着不同的合并策略。举例来说，对于生命周期函数，它的合并策略是这样的：
function mergeHook (
parentVal: ?Array,
childVal: ?Function | ?Array
): ?Array {
return childVal
? parentVal
? parentVal.concat(childVal)
: Array.isArray(childVal)
? childVal
: [childVal]
: parentVal
}
LIFECYCLE_HOOKS.forEach(hook => {
strats[hook] = mergeHook
})
这其中的LIFECYCLE_HOOKS的定义在src/shared/constants.js中：
export const LIFECYCLE_HOOKS = [
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
'activated',
'deactivated',
'errorCaptured'
]
这里定义了Vue.js所有的钩子函数名称，所以对于钩子函数，他们的合并策略都是mergeHook函数。这个函数的实现也非常有意思，用了一个多层3元运算符，逻辑就是如果不存在childVal ，就返回parentVal；否则再判断是否存在parentVal，如果存在就把childVal添加到 parentVal 后返回新数组；否则返回 childVal 的数组。所以回到mergeOptions函数，一旦parent和child都定义了相同的钩子函数，那么它们会把2个钩子函数合并成一个数组。
关于其它属性的合并策略的定义都可以在src/core/util/options.js文件中看到。
通过执行mergeField函数，把合并后的结果保存到options对象中，最终返回它。
因此，在我们当前这个case下，执行完如下合并后：
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
vm.$options的值差不多是如下这样：
vm.$options = {
components: { },
created: [
function created() {
console.log('parent created')
}
],
directives: { },
filters: { },
_base: function Vue(options) {
// ...
},
el: "#app",
render: function (h) {
//...
}
}
组件场景
由于组件的构造函数是通过Vue.extend继承自Vue的，先回顾一下这个过程，代码定义在src/core/global-api/extend.js中。
/**
* Class inheritance
*/
Vue.extend = function (extendOptions: Object): Function {
// ...
Sub.options = mergeOptions(
Super.options,
extendOptions
)
// ...
// keep a reference to the super options at extension time.
// later at instantiation we can check if Super's options have
// been updated.
Sub.superOptions = Super.options
Sub.extendOptions = extendOptions
Sub.sealedOptions = extend({}, Sub.options)
// ...
return Sub
}
我们只保留关键逻辑，这里的extendOptions对应的就是前面定义的组件对象，它会和Vue.options合并到Sub.opitons中。
接下来我们再回忆一下子组件的初始化过程，代码定义在 src/core/vdom/create-component.js 中：
export function createComponentInstanceForVnode (
vnode: any, // we know it's MountedComponentVNode but flow doesn't
parent: any, // activeInstance in lifecycle state
): Component {
const options: InternalComponentOptions = {
_isComponent: true,
_parentVnode: vnode,
parent
}
// ...
return new vnode.componentOptions.Ctor(options)
}
这里的vnode.componentOptions.Ctor就是指向 Vue.extend 的返回值Sub， 所以执行new vnode.componentOptions.Ctor(options)接着执行this._init(options)，因为options._isComponent为true，那么合并options的过程走到了initInternalComponent(vm, options)逻辑。先来看一下它的代码实现，在src/core/instance/init.js中：
export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
const opts = vm.$options = Object.create(vm.constructor.options)
// doing this because it's faster than dynamic enumeration.
const parentVnode = options._parentVnode
opts.parent = options.parent
opts._parentVnode = parentVnode
const vnodeComponentOptions = parentVnode.componentOptions
opts.propsData = vnodeComponentOptions.propsData
opts._parentListeners = vnodeComponentOptions.listeners
opts._renderChildren = vnodeComponentOptions.children
opts._componentTag = vnodeComponentOptions.tag
if (options.render) {
opts.render = options.render
opts.staticRenderFns = options.staticRenderFns
}
}
initInternalComponent方法首先执行const opts = vm.$options = Object.create(vm.constructor.options)，这里的vm.constructor就是子组件的构造函数Sub，相当于vm.$options = Object.create(Sub.options)。
接着又把实例化子组件传入的子组件父VNode实例parentVnode、子组件的父Vue实例parent保存到vm.$options中，另外还保留了parentVnode配置中的如propsData等其它的属性。
这么看来，initInternalComponent只是做了简单一层对象赋值，并不涉及到递归、合并策略等复杂逻辑。
因此，在我们当前这个case下，执行完如下合并后：
initInternalComponent(vm, options)
vm.$options的值差不多是如下这样：
vm.$options = {
parent: Vue /*父Vue实例*/,
propsData: undefined,
_componentTag: undefined,
_parentVnode: VNode /*父VNode实例*/,
_renderChildren:undefined,
__proto__: {
components: { },
directives: { },
filters: { },
_base: function Vue(options) {
//...
},
_Ctor: {},
created: [
function created() {
console.log('parent created')
}, function created() {
console.log('child created')
}
],
mounted: [
function mounted() {
console.log('child mounted')
}
],
data() {
return {
msg: 'Hello Vue'
}
},
template: '{{msg}}'
}
}
总结
那么至此，Vue初始化阶段对于options的合并过程就介绍完了，我们需要知道对于options的合并有2种方式，子组件初始化过程通过initInternalComponent方式要比外部初始化Vue通过mergeOptions的过程要快，合并完的结果保留在vm.$options中。
纵观一些库、框架的设计几乎都是类似的，自身定义了一些默认配置，同时又可以在初始化阶段传入一些定义配置，然后去merge默认配置，来达到定制化不同需求的目的。只不过在Vue的场景下，会对merge的过程做一些精细化控制，虽然我们在开发自己的JSSDK的时候并没有Vue这么复杂，但这个设计思想是值得我们借鉴的。