Vue2.0源码学习(4) - 合并配置 (2)

遍历这些值，然后定义它们的合并策略，其实都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合并就告一段落了，我们需要知道它有两个场景，外部调用场景和组件场景。
其实一些库、框架的设计也是类似的，都会有自身的默认配置，同时又允许在初始化的时候让开发者自定义配置，之后再合并两个配置来达到应付各种场景需求，这种设计思想也是我们写组件或做架构的时候必不可少的思维模式。