组件场景
由于组件的构造函数是通过 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.construction
就是子组件的构造函数 Sub
,相当于 vm.$options = 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: '<div>{{msg}}</div>'
}
写在最后:
options
的合并有 2 种方式,子组件初始化过程通过 initInternalComponent
方式要比外部初始化 Vue 通过 mergeOptions
的过程要快,合并完的结果保留在 vm.$options
中。其实,一些库、框架的设计几乎都是类似的,自身定义了一些默认配置,同时又可以在初始化阶段传入一些定义配置,然后去 merge 默认配置,来达到定制化不同需求的目的。