Vue源码学习 - 组件化一 createComponent

组件化
- createComponent
- - 构造子类构造函数
  - 安装组件钩子函数
  - 实例化 VNode
  - 总结

学习内容和文章内容来自黄轶老师
黄轶老师的慕课网视频教程地址:《Vue.js2.0 源码揭秘》、
黄轶老师拉钩教育教程地址:《Vue.js 3.0 核心源码解析》
这里分析的源码是Runtime + Compiler 的 Vue.js
调试代码在:node_modules\vue\dist\vue.esm.js 里添加
vue版本:Vue.js 2.5.17-beta

你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录

点击回到 Vue源码学习完整目录

组件化

Vue.js另一个核心思想是组件化。所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件资源独立，组件在系统内部可复用，组件和组件之间可以嵌套。

我们在用 Vue.js开发实际项目的时候，就是像搭积木一样，编写一堆组件拼装生成页面。在 Vue.js 的官网中，也是花了大篇幅来介绍什么是组件，如何编写组件以及组件拥有的属性和特性。

那么在这一章节，我们将从源码的角度来分析 Vue 的组件内部是如何工作的，只有了解了内部的工作原理，才能让我们使用它的时候更加得心应手。

接下来我们会用 Vue-cli 初始化的代码为例，来分析一下 Vue 组件初始化的一个过程。

// src\main.js
import Vue from 'vue'
import App from './App.vue'var app = new Vue({el: '#app',// 这里的 h 是 createElement 方法render: h => h(App)
})

这段代码相信很多同学都很熟悉，它和我们上一章相同的点也是通过 render 函数去渲染的，不同的是这次通过createElement传的参数是一个组件而不是一个原生的标签，那么接下来我们就开始分析这一过程。

createComponent

上一章我们在分析createElement的实现的时候，它最终会调用 _createElement方法，其中有一段逻辑是对参数 tag 的判断，如果是一个普通的 html 标签，像上一章的例子那样是一个普通的 div，则会实例化一个普通 VNode 节点，否则通过 createComponent 方法创建一个组件 VNode。

// 这里的tag 就是src\main.js文件里 render: h => h(App) 传的App
if (typeof tag === 'string') {let Ctorns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)if (config.isReservedTag(tag)) {// platform built-in elementsvnode = new VNode(config.parsePlatformTagName(tag), data, children,undefined, undefined, context)} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {// componentvnode = createComponent(Ctor, data, context, children, tag)} else {// unknown or unlisted namespaced elements// check at runtime because it may get assigned a namespace when its// parent normalizes childrenvnode = new VNode(tag, data, children,undefined, undefined, context)}
} else {// 可以在这里加个debugger 单步调试// direct component options / constructorvnode = createComponent(tag, data, context, children)
}

在我们这一章传入的是一个 App 对象，它本质上是一个 Component 类型，那么它会走到上述代码的else逻辑，直接通过 createComponent方法来创建vnode。

所以接下来我们来看一下createComponent方法的实现，它定义在 src/core/vdom/create-component.js文件中：

export function createComponent (Ctor: Class<Component> | Function | Object | void,data: ?VNodeData,context: Component,children: ?Array<VNode>,tag?: string
): VNode | Array<VNode> | void {// Ctor参数就是前面 createComponent(tag, data, context, children)传入的tag参数
// context就是Vueif (isUndef(Ctor)) {return}// 这里baseCtor相当于Vueconst baseCtor = context.$options._base// plain options object: turn it into a constructorif (isObject(Ctor)) {// extend方法这里重点看 // 主要将baseCtor 也就是Vue相关属性方法继承给Ctor 也就是传入的App组件Ctor = baseCtor.extend(Ctor)}// if at this stage it's not a constructor or an async component factory,// reject.if (typeof Ctor !== 'function') {if (process.env.NODE_ENV !== 'production') {warn(`Invalid Component definition: ${String(Ctor)}`, context)}return}// 这里是异步组件相关内容 这里先跳过// async componentlet asyncFactoryif (isUndef(Ctor.cid)) {asyncFactory = CtorCtor = resolveAsyncComponent(asyncFactory, baseCtor, context)if (Ctor === undefined) {// return a placeholder node for async component, which is rendered// as a comment node but preserves all the raw information for the node.// the information will be used for async server-rendering and hydration.return createAsyncPlaceholder(asyncFactory,data,context,children,tag)}}data = data || {}// resolve constructor options in case global mixins are applied after// component constructor creationresolveConstructorOptions(Ctor)// transform component v-model data into props & eventsif (isDef(data.model)) {transformModel(Ctor.options, data)}// extract propsconst propsData = extractPropsFromVNodeData(data, Ctor, tag)// functional componentif (isTrue(Ctor.options.functional)) {return createFunctionalComponent(Ctor, propsData, data, context, children)}// extract listeners, since these needs to be treated as// child component listeners instead of DOM listenersconst listeners = data.on// replace with listeners with .native modifier// so it gets processed during parent component patch.data.on = data.nativeOnif (isTrue(Ctor.options.abstract)) {// abstract components do not keep anything// other than props & listeners & slot// work around flowconst slot = data.slotdata = {}if (slot) {data.slot = slot}}// 这里可以关注下 主要是添加一些组件钩子函数// install component management hooks onto the placeholder nodeinstallComponentHooks(data)// return a placeholder vnodeconst name = Ctor.options.name || tag// 留意这里new VNode() 第三第四第五个参数为undefinedconst vnode = new VNode(`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,data, undefined, undefined, undefined, context,{ Ctor, propsData, listeners, tag, children },asyncFactory)// Weex specific: invoke recycle-list optimized @render function for// extracting cell-slot template.// https://github.com/Hanks10100/weex-native-directive/tree/master/component/* istanbul ignore if */if (__WEEX__ && isRecyclableComponent(vnode)) {return renderRecyclableComponentTemplate(vnode)}return vnode
}

可以看到，createComponent 的逻辑也会有一些复杂，但是分析源码比较推荐的是只分析核心流程，分支流程可以之后针对性的看，所以这里针对组件渲染这个 case 主要就 3 个关键步骤：

构造子类构造函数，
安装组件钩子函数和
实例化 vnode。

构造子类构造函数

const baseCtor = context.$options._base// plain options object: turn it into a constructor
if (isObject(Ctor)) {Ctor = baseCtor.extend(Ctor)
}

我们在编写一个组件的时候，通常都是创建一个普通对象，还是以我们的App.vue 为例，代码如下：

import HelloWorld from './components/HelloWorld'export default {name: 'app',components: {HelloWorld}
}

这里export的是一个对象，所以 createComponent里的代码逻辑会执行到 baseCtor.extend(Ctor)，在这里 baseCtor 实际上就是Vue，这个的定义是在最开始初始化 Vue的阶段，在src/core/global-api/index.js 中的initGlobalAPI函数有这么一段逻辑：

// 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

细心的同学会发现，这里定义的是 Vue.options，而我们的 createComponent取的是 context.$options，实际上在src/core/instance/init.js 里 Vue 原型上的 _init 函数中有这么一段逻辑：

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

这样就把 Vue 上的一些 option 扩展到了 vm.$options上，所以我们也就能通过 vm.$options._base 拿到 Vue 这个构造函数了。
mergeOptions 的实现我们会在后续章节中具体分析，现在只需要理解它的功能是把 Vue 构造函数的 options 和用户传入的 options 做一层合并，到 vm.$options 上。

在了解了 baseCtor 指向了 Vue 之后，我们来看一下 Vue.extend 函数的定义，在 src/core/global-api/extend.js 中。

/*** Class inheritance*/
Vue.extend = function (extendOptions: Object): Function {extendOptions = extendOptions || {}const Super = thisconst SuperId = Super.cid// 缓存用 同一个组件只会初始化一次 后续复用 直接返回缓存 而不用重新初始化const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})if (cachedCtors[SuperId]) {return cachedCtors[SuperId]}const name = extendOptions.name || Super.options.nameif (process.env.NODE_ENV !== 'production' && name) {// 校验组件名称validateComponentName(name)}const Sub = function VueComponent (options) {this._init(options)}// Sub继承Super 也就是VueSub.prototype = Object.create(Super.prototype)Sub.prototype.constructor = SubSub.cid = cid++Sub.options = mergeOptions(Super.options,extendOptions)Sub['super'] = Super// For props and computed properties, we define the proxy getters on// the Vue instances at extension time, on the extended prototype. This// avoids Object.defineProperty calls for each instance created.if (Sub.options.props) {initProps(Sub)}if (Sub.options.computed) {initComputed(Sub)}// allow further extension/mixin/plugin usageSub.extend = Super.extendSub.mixin = Super.mixinSub.use = Super.use// create asset registers, so extended classes// can have their private assets too.ASSET_TYPES.forEach(function (type) {Sub[type] = Super[type]})// enable recursive self-lookupif (name) {Sub.options.components[name] = Sub}// 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.optionsSub.extendOptions = extendOptionsSub.sealedOptions = extend({}, Sub.options)// cache constructorcachedCtors[SuperId] = Subreturn Sub
}

Vue.extend 的作用就是构造一个 Vue 的子类，它使用一种非常经典的原型继承的方式把一个纯对象转换一个继承于 Vue 的构造器 Sub 并返回，然后对 Sub 这个对象本身扩展了一些属性，
如扩展options、添加全局 API等；
并且对配置中的props 和 computed 做了初始化工作；
最后对于这个Sub 构造函数做了缓存，避免多次执行 Vue.extend的时候对同一个子组件重复构造。

这样当我们去实例化 Sub的时候，就会执行 this._init逻辑再次走到了Vue 实例的初始化逻辑，实例化子组件的逻辑在之后的章节会介绍。

const Sub = function VueComponent (options) {this._init(options)
}

安装组件钩子函数

// install component management hooks onto the placeholder node
installComponentHooks(data)

我们之前提到 Vue.js 使用的Virtual DOM 参考的是开源库 snabbdom，它的一个特点是在 VNode 的 patch 流程中对外暴露了各种时机的钩子函数，方便我们做一些额外的事情，Vue.js 也是充分利用这一点，在初始化一个 Component 类型的 VNode 的过程中实现了几个钩子函数：

const componentVNodeHooks = {init (vnode: VNodeWithData, hydrating: boolean): ?boolean {if (vnode.componentInstance &&!vnode.componentInstance._isDestroyed &&vnode.data.keepAlive) {// kept-alive components, treat as a patchconst mountedNode: any = vnode // work around flowcomponentVNodeHooks.prepatch(mountedNode, mountedNode)} else {const child = vnode.componentInstance = createComponentInstanceForVnode(vnode,activeInstance)child.$mount(hydrating ? vnode.elm : undefined, hydrating)}},prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {const options = vnode.componentOptionsconst child = vnode.componentInstance = oldVnode.componentInstanceupdateChildComponent(child,options.propsData, // updated propsoptions.listeners, // updated listenersvnode, // new parent vnodeoptions.children // new children)},insert (vnode: MountedComponentVNode) {const { context, componentInstance } = vnodeif (!componentInstance._isMounted) {componentInstance._isMounted = truecallHook(componentInstance, 'mounted')}if (vnode.data.keepAlive) {if (context._isMounted) {// vue-router#1212// During updates, a kept-alive component's child components may// change, so directly walking the tree here may call activated hooks// on incorrect children. Instead we push them into a queue which will// be processed after the whole patch process ended.queueActivatedComponent(componentInstance)} else {activateChildComponent(componentInstance, true /* direct */)}}},destroy (vnode: MountedComponentVNode) {const { componentInstance } = vnodeif (!componentInstance._isDestroyed) {if (!vnode.data.keepAlive) {componentInstance.$destroy()} else {deactivateChildComponent(componentInstance, true /* direct */)}}}
}const hooksToMerge = Object.keys(componentVNodeHooks)function installComponentHooks (data: VNodeData) {const hooks = data.hook || (data.hook = {})for (let i = 0; i < hooksToMerge.length; i++) {const key = hooksToMerge[i]const existing = hooks[key]const toMerge = componentVNodeHooks[key]if (existing !== toMerge && !(existing && existing._merged)) {hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge}}
}function mergeHook (f1: any, f2: any): Function {const merged = (a, b) => {// flow complains about extra args which is why we use anyf1(a, b)f2(a, b)}merged._merged = truereturn merged
}

整个installComponentHooks的过程就是把 componentVNodeHooks 的钩子函数合并到 data.hook 中，在 VNode 执行 patch 的过程中执行相关的钩子函数，具体的执行我们稍后在介绍 patch 过程中会详细介绍。
这里要注意的是合并策略，在合并过程中，如果某个时机的钩子已经存在 data.hook中，那么通过执行mergeHook函数做合并，这个逻辑很简单，就是在最终执行的时候，依次执行这两个钩子函数即可。

实例化 VNode

const name = Ctor.options.name || tag
const vnode = new VNode(`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,data, undefined, undefined, undefined, context,{ Ctor, propsData, listeners, tag, children },asyncFactory
)
return vnode

最后一步非常简单，通过 new VNode 实例化一个vnode 并返回。需要注意的是和普通元素节点的 vnode 不同，组件的 vnode 是没有 children 的，这点很关键，在之后的 patch 过程中我们会再提。

总结

这一节我们分析了 createComponent 的实现，了解到它在渲染一个组件的时候的 3 个关键逻辑：
构造子类构造函数，
安装组件钩子函数和
实例化 vnode。
createComponent 后返回的是组件 vnode，它也一样走到 vm._update 方法，进而执行了patch 函数，我们在上一章对patch 函数做了简单的分析，那么下一节我们会对它做进一步的分析。

Vue源码学习 - 组件化(二)

点击回到 Vue源码学习完整目录

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起变得更强