Vue2.0源码理解(4) - 合并配置
合并配置
通过之前的源码学习，我们已经了解到了new Vue主要有两种场景，第一种就是在外部主动调用new Vue创建一个实例，第二个就是代码内部创建子组件的时候自行创建一个new Vue实例。但是无论那种new Vue方式，我们都需要进入了Vue._init，执行mergeOptions函数合并配置。为了更直观，我们整个demo调试耍耍。
// src\main.js
let childComp = {
template:"<div>{{msg}}</div>",
data(){
return{
msg:"childComp"
}
},
created(){
console.log("childComp created");
},
mounted(){
console.log("childComp mounted");
}
}
Vue.mixin({
created(){
console.log("mixin");
}
})
let app = new Vue({
el:"#app",
render: h => h(childComp)
}) 我用的时vue-cli3，这里有个小细节需要注意一下，vue-cli3开发环境默认使用的是runtime版本（node_modules\vue\dist\vue.runtime.esm.js），这个版本是不支持编译template的，需要用Compiler版本，这个在vue.config.js中配置一下即可，配置代码如下：
module.exports = {
runtimeCompiler: true
} 准备工作搞好了，那么我们现在开始进入_init函数，看看合并配置是怎么一个说法。
// src\core\instance\init.js
Vue.prototype._init = function (options?: Object) {
...
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), //vue.options
options || {}, //new Vue中的options
vm
)
}
...
} 外部调用场景
上述代码中可明显看出两中合并配置的情况，我们一开始进入的肯定时非组件模式，也就是else情况。mergeOptions传入了3个入参，我们先看第一个入参的resolveConstructorOptions方法做了什么。
// src\core\instance\init.js
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
} 入参Ctor = vm.constructor = Vue,Vue没有父级，所以不会进入到if逻辑，因此这里返回的就是Vue.options的配置。Vue.options则在初始化的时候就做了定义和配置。
// src\core\global-api\index.js
Vue.options = Object.create(null)
ASSET_TYPES.forEach(type => {
Vue.options[type + 's'] = Object.create(null)
})
Vue.options._base = Vue //createComponent时用到，之前提及过。
extend(Vue.options.components, builtInComponents) //扩展一些内置组件 这里ASSET_TYPES在src\shared\constants.js有定义
// src\shared\constants.js
export const ASSET_TYPES = [
'component',
'directive',
'filter'
] 然后我们再返回去_init函数分析一下mergeOptions函数：
// src\core\util\options.js
export function mergeOptions (
parent: Object,
child: Object,
vm?: Component
): Object {
...
const options = {}
let key
、、
for (key in parent) {
mergeField(key)
}
for (key in child) {
// key没在parent定义时
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
} 简略了部分代码，我们先去关注合并的关键代码。
这边其实就是遍历了parent(Vue.options)和child(new Vue中的options),然后遍历的过程中调用了mergeField方法。而该方法先去拿到一个strat函数，这个函数首先是再strats中去找，没找到就使用defaultStrat默认函数(defaultStrat可自行查阅源码)，我们主要看strats:
// src\core\util\options.js
const strats = config.optionMergeStrategies strats是定义在config中，所以说我们是可以随意改动strats的。然后在options.js中，strats扩展了很多属性，每个属性(key)都是一种合并策略，有兴趣的可以一个个研究，因为我们例子是生命周期的合并，所以我们先挑生命周期的合并策略来分析，后面遇到其他的再做分析。
// src\core\util\options.js
LIFECYCLE_HOOKS.forEach(hook => {
strats[hook] = mergeHook
}) LIFECYCLE_HOOKS定义在src\shared\constants.js
// src\shared\constants.js
export const LIFECYCLE_HOOKS = [
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
'activated',
'deactivated',
'errorCaptured'
] 遍历这些值，然后定义它们的合并策略，其实都mergeHook方法，都是一样的合并策略，下面我们看看mergeHook函数：
// src\core\util\options.js
function mergeHook (
parentVal: ?Array<Function>,
childVal: ?Function | ?Array<Function>
): ?Array<Function> {
return childVal
? parentVal
? parentVal.concat(childVal)
: Array.isArray(childVal)
? childVal
: [childVal]
: parentVal
} 这个多层嵌套的三元表达式看着复杂，其实不难，我们可以分段理解：
①：childVal有值：进入②，
childVal没值：赋值parentVal；
②：parentVal有值：parentVal和childVal数组合并，
parentVal没值：进入③；
③：childVal是个数组：赋值childVal，
childVal不是数组：赋值[childVal]；
最终我们return了一个数组到mergeOptions函数。
现在我们回过头来demo中的Vue.mixin定义，其源码其实也调用了mergeOptions，我们看看源码：
// src\core\global-api\mixin.js
export function initMixin (Vue: GlobalAPI) {
Vue.mixin = function (mixin: Object) {
this.options = mergeOptions(this.options, mixin)
return this
}
} mixin的源码很简单，其实就是调用了mergeOptions对Vue.options做了合并。有个小细节需要留意，就是demo中Vue.mixin和new Vue的代码顺序，必须先对Vue.mixin做出定义，不然在new Vue的时候Vue.options和new Vue的options合并时，是会丢失掉Vue.mixin的，因为那时候Vue.mixin并没有执行mergeOptions把options合并到Vue.options上。
组件场景
接下来我们看另一种情况，组件合并配置。也就是在_inti方法中运行了initInternalComponent函数，我们来分析一下它做了什么？
// 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
}
} 子组件的合并就相对简单很多了，vm.$options去继承了子组件构造器vm.constructor.options，然后再把一些配置挂载到上面。我们主要看看vm.constructor.options是怎么来的。
// src\core\global-api\extend.js
Vue.extend = function (extendOptions: Object): Function {
const Super = this
...
const Sub = function VueComponent (options) {
this._init(options)
}
// 构造器指向自己
Sub.prototype.constructor = Sub
// 合并配置
Sub.options = mergeOptions(
Super.options,
extendOptions
)
...
} 其实Vue.extend的时候对子组件的构造器进行了定义了，还对Vue.options(Super.options)和子组件的options(extendOptions)做了合并。
所以initInternalComponent中的vm.$options其实就是一个已经把Vue.options和子组件的options合并好的配置集合了。
总结
至此Vue的options合并就告一段落了，我们需要知道它有两个场景，外部调用场景和组件场景。
其实一些库、框架的设计也是类似的，都会有自身的默认配置，同时又允许在初始化的时候让开发者自定义配置，之后再合并两个配置来达到应付各种场景需求，这种设计思想也是我们写组件或做架构的时候必不可少的思维模式。