|
组件声明组件 VNode 的创建组件实例的创建和挂载过程
组件化可以让我们方便的把页面拆分成多个可重用的组件组件是独立的，系统内可重用，组件之间可以嵌套有了组件可以像搭积木一样开发网页下面我们将从源码的角度来分析 Vue 组件内部如何工作
组件实例的创建过程是从上而下组件实例的挂载过程是从下而上
组件声明 全局组件的定义方式：
Vue.component('comp', { template: 'hello'})
Vue.component() 入口
创建组件的构造函数，挂载到 Vue 实例的 vm.options.component.componentName = Ctor// src\core\global-api\index.js// 注册 Vue.directive()、 Vue.component()、Vue.filter()initAssetRegisters(Vue)// src\core\global-api\assets.jsif (type === 'component' && isPlainObject(definition)) {definition.name = definition.name || iddefinition = this.options._base.extend(definition)}……// 全局注册，存储资源并赋值// this.options['components']['comp'] = Ctorthis.options[type + 's'][id] = definition// src\core\global-api\index.js// this is used to identify the "base" constructor to extend all plainobject// components with in Weex's multi-instance scenarios.Vue.options._base = Vue// src\core\global-api\extend.jsVue.extend()
组件构造函数的创建
const Sub = function VueComponent(options) {this._init(options)}Sub.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}
组件 VNode 的创建
创建根组件，首次 _render() 时，会得到整棵树的 VNode 结构整体流程：new Vue() —> $mount() —> vm._render() —> createElement() —> createComponent()创建组件的 VNode，初始化组件的 hook 钩子函数
// 1. _createElement() 中调用 createComponent()// src\core\vdom\create-element.jselse if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) { // 查找自定义组件构造函数的声明 // 根据 Ctor 创建组件的 VNode // component vnode = createComponent(Ctor, data, context, children, tag) // 2. createComponent() 中调用创建自定义组件对应的 VNode // src\core\vdom\create-component.js export function createComponent( Ctor: Class | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array, tag?: string ): VNode | Array | void { if (isUndef(Ctor)) { return } …… // install component management hooks onto the placeholder node // 安装组件的钩子函数 init/prepatch/insert/destroy // 初始化了组件的 data.hooks 中的钩子函数 installComponentHooks(data) // return a placeholder vnode const name = Ctor.options.name || tag // 创建自定义组件的 VNode，设置自定义组件的名字 // 记录this.componentOptions = componentOptions const vnode = new VNode( `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`, data, undefined, undefined, undefined, context, { Ctor, propsData, listeners, tag, children }, asyncFactory ) return vnode } // 3. installComponentHooks() 初始化组件的 data.hook function installComponentHooks(data: VNodeData) { const hooks = data.hook || (data.hook = {}) // 用户可以传递自定义钩子函数 // 把用户传入的自定义钩子函数和 componentVNodeHooks 中预定义的钩子函数合并 for (let i = 0; i patch() —> createElm() —> createComponent()
// src\core\vdom\patch.js// 1. 创建组件实例，挂载到真实 DOMfunction createComponent(vnode, insertedVnodeQueue, parentElm, refElm) { let i = vnode.data if (isDef(i)) { const isReactivated = isDef(vnode.componentInstance) && i.keepAlive if (isDef(i = i.hook) && isDef(i = i.init)) { // 调用 init() 方法，创建和挂载组件实例 // init() 的过程中创建好了组件的真实 DOM,挂载到了 vnode.elm 上 i(vnode, false /* hydrating */) } // after calling the init hook, if the vnode is a child component // it should've created a child instance and mounted it. the child // component also has set the placeholder vnode's elm. // in that case we can just return the element and be done. if (isDef(vnode.componentInstance)) { // 调用钩子函数（VNode的钩子函数初始化属性/事件/样式等，组件的钩子函数） initComponent(vnode, insertedVnodeQueue) // 把组件对应的 DOM 插入到父元素中 insert(parentElm, vnode.elm, refElm) if (isTrue(isReactivated)) { reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm) } return true } }}// 2. 调用钩子函数，设置局部作用于样式function initComponent(vnode, insertedVnodeQueue) { if (isDef(vnode.data.pendingInsert)) { insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert) vnode.data.pendingInsert = null } vnode.elm = vnode.componentInstance.$el if (isPatchable(vnode)) { // 调用钩子函数 invokeCreateHooks(vnode, insertedVnodeQueue) // 设置局部作用于样式 setScope(vnode) } else { // empty component root. // skip all element-related modules except for ref (#3455) registerRef(vnode) // make sure to invoke the insert hook insertedVnodeQueue.push(vnode) }}// 3. 调用钩子函数function invokeCreateHooks(vnode, insertedVnodeQueue) { // 调用 VNode 的钩子函数，初始化属性/样式/事件等 for (let i = 0; i |