详解vue 组件的实现原理

Vue.ponent('my-ponent-name', { / ... / })

var ComponentA = { / ... / }

new Vue({
 el: '#app',
 ponents: {
  'ponent-a': ComponentA
 }
})

// Vue.ponent的核心代码
// ASSET_TYPES = ['ponent', 'directive', 'filter']
ASSET_TYPES.forEach(type => {
  Vue[type] = function (id, definition
  ){
   if (!definition) {
    return this.options[type + 's'][id]
   } else {
    // 组件注册
    if (type === 'ponent' && isPlainObject(definition)) {
     definition.name = definition.name || id
     // 如果definition是一个对象，需要调用Vue.extend()转换成函数。Vue.extend会创建一个Vue的子类（组件类），并返回子类的构造函数。
     definition = this.options._base.extend(definition)
    }
    
    // ...省略其他代码
    // 这里很关键，将组件添加到构造函数的选项对象中Vue.options上。
    this.options[type + 's'][id] = definition
    return definition
   }
  }
 })

// Vue的构造函数
function Vue(options){
 if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof Vue)
 ) {
  warn('Vue is a constructor and should be called with the `new` keyword')
 }
 this._init(options)
  
}

// Vue的初始化中进行选项对象的合并
Vue.prototype._init = function (options) {
  const vm = this
  vm._uid = uid++
  vm._isVue = true
  // ...省略其他代码
  if (options && options._isComponent) {
   initInternalComponent(vm, options)
  } else {
   // 合并vue选项对象，合并构造函数的选项对象和实例中的选项对象
   vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   )
  }
  // ...省略其他代码
 }

<div id="app">
 <!--使用组件button-counter-->
 <button-counter></button-counter>
</div>

// 全局注册一个名为 button-counter 的组件
Vue.ponent('button-counter', {
 data: function () {
  return {
   count: 0
  }
 },
 template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

// 创建Vue实例
new Vue({
  el: '#app'
})

export function _createElement (
 context: Component,
 tag?: string | Class<Component> | Function | Object,
 data?: VNodeData,
 children?: any,
 normalizationType?: number
): VNode | Array<VNode> {

 //...省略其他代码
 
 let vnode, ns
 if (typeof tag === 'string') {
  let Ctor
  ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
  // 如果是普通的HTML标签
  if (config.isReservedTag(tag)) {
   vnode = new VNode(
    config.parsePlatformTagName(tag), data, children,
    undefined, undefined, context
   )
  } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'ponents', tag))) {
   // 如果是组件标签，e.g. my-custom-tag
   vnode = createComponent(Ctor, data, context, children, tag)
  } else {
   vnode = new VNode(
    tag, data, children,
    undefined, undefined, context
   )
  }
 } else {
  // direct ponent options / constructor
  vnode = createComponent(tag, data, context, children)
 }
 
 if (Array.isArray(vnode)) {
  return vnode
 } else if (isDef(vnode)) {
  if (isDef(ns)) applyNS(vnode, ns)
  if (isDef(data)) registerDeepBindings(data)
  return vnode
 } else {
  return createEmptyVNode()
 }
}

export function resolveAsset (
 options: Object,
 type: string,
 id: string,
 warnMissing?: boolean
): any {
 / istanbul ignore if /
 if (typeof id !== 'string') {
  return
 }
 const assets = options[type]

 // 检查vue实例本身有无该组件
 if (hasOwn(assets, id)) return assets[id]
 const camelizedId = camelize(id)
 if (hasOwn(assets, camelizedId)) return assets[camelizedId]
 const PascalCaseId = capitalize(camelizedId)
 if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]

 // 如果实例上没有找到，去查找原型链
 const res = assets[id] || assets[camelizedId] || assets[PascalCaseId]
 if (process.env.NODE_ENV !== 'production' && warnMissing && !res) {
  warn(
   'Failed to resolve ' + type.slice(0, -1) + ': ' + id,
   options
  )
 }
 return res
}

// createComponent
export function createComponent (
 Ctor: Class<Component> | Function | Object | void,
 data: ?VNodeData,
 context: Component,
 children: ?Array<VNode>,
 tag?: string
): VNode | Array<VNode> | void {
 if (isUndef(Ctor)) {
  return
 }
 
 // 获取Vue的构造函数
 const baseCtor = context.$options._base

 // 如果Ctor是一个选项对象，需要使用Vue.extend使用选项对象，创建将组件选项对象转换成一个Vue的子类
 if (isObject(Ctor)) {
  Ctor = baseCtor.extend(Ctor)
 }

 // 如果Ctor还不是一个构造函数或者异步组件工厂函数，不再往下执行。
 if (typeof Ctor !== 'function') {
  if (process.env.NODE_ENV !== 'production') {
   warn(`Invalid Component definition: ${String(Ctor)}`, context)
  }
  return
 }

 // 异步组件
 let asyncFactory
 if (isUndef(Ctor.cid)) {
  asyncFactory = Ctor
  Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
  if (Ctor === undefined) {
   // return a placeholder node for async ponent, which is rendered
   // as a ment 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 || {}

 // 重新解析构造函数的选项对象，在组件构造函数创建后，Vue可能会使用全局混入造成构造函数选项对象改变。
 resolveConstructorOptions(Ctor)

 // 处理组件的v-model
 if (isDef(data.model)) {
  transformModel(Ctor.options, data)
 }

 // 提取props
 const propsData = extractPropsFromVNodeData(data, Ctor, tag)

 // 函数式组件
 if (isTrue(Ctor.options.functional)) {
  return createFunctionalComponent(Ctor, propsData, data, context, children)
 }

 const listeners = data.on
 data.on = data.nativeOn

 if (isTrue(Ctor.options.abstract)) {
  const slot = data.slot
  data = {}
  if (slot) {
   data.slot = slot
  }
 }

 // 安装组件hooks
 installComponentHooks(data)

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

 return vnode
}
 

/
   Vue类继承，以Vue的原型为原型创建Vue组件子类。继承实现方式是采用Object.create()，在内部实现中，加入了缓存的机制，避免重复创建子类。
  /
 Vue.extend = function (extendOptions: Object): Function {
  // extendOptions 是组件的选项对象，与vue所接收的一样
  extendOptions = extendOptions || {}
  // Super变量保存对父类Vue的引用
  const Super = this
  // SuperId 保存父类的cid
  const SuperId = Super.cid
  // 缓存构造函数
  const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
  if (cachedCtors[SuperId]) {
   return cachedCtors[SuperId]
  }

  // 获取组件的名字
  const name = extendOptions.name || Super.options.name
  if (process.env.NODE_ENV !== 'production' && name) {
   validateComponentName(name)
  }

  // 定义组件的构造函数
  const Sub = function VueComponent (options) {
   this._init(options)
  }

  // 组件的原型对象指向Vue的选项对象
  Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub

  // 为组件分配一个cid
  Sub.cid = cid++

  // 将组件的选项对象与Vue的选项合并
  Sub.options = mergeOptions(
   Super.options,
   extendOptions
  )
  // 通过super属性指向父类
  Sub['super'] = Super
  
  // 将组件实例的props和puted属代理到组件原型对象上，避免每个实例创建的时候重复调用Object.defineProperty。
  if (Sub.options.props) {
   initProps(Sub)
  }

  if (Sub.options.puted) {
   initComputed(Sub)
  }

  // 复制父类Vue上的extend/mixin/use等全局方法
  Sub.extend = Super.extend
  Sub.mixin = Super.mixin
  Sub.use = Super.use

  // 复制父类Vue上的ponent、directive、filter等资源注册方法
  ASSET_TYPES.forEach(function (type) {
   Sub[type] = Super[type]
  })

  // enable recursive self-lookup
  if (name) {
   Sub.options.ponents[name] = Sub
  }

  // 保存父类Vue的选项对象
  Sub.superOptions = Super.options
  // 保存组件的选项对象
  Sub.extendOptions = extendOptions
  // 保存最终的选项对象
  Sub.sealedOptions = extend({}, Sub.options)

  // 缓存组件的构造函数
  cachedCtors[SuperId] = Sub
  return Sub
 }
}

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]
  // 内置的组件vnode钩子
  const toMerge = ponentVNodeHooks[key]
  // 合并钩子
  if (existing !== toMerge && !(existing && existing._merged)) {
   hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge
  }
 }
}

// 组件vnode的钩子。
const ponentVNodeHooks = {
 // 实例化组件
 init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
  if (
   vnode.ponentInstance &&
   !vnode.ponentInstance._isDestroyed &&
   vnode.data.keepAlive
  ) {
   // kept-alive ponents, treat as a patch
   const mountedNode: any = vnode // work around flow
   ponentVNodeHooks.prepatch(mountedNode, mountedNode)
  } else {
   // 生成组件实例
   const child = vnode.ponentInstance = createComponentInstanceForVnode(
    vnode,
    activeInstance
   )
   // 挂载组件，与vue的$mount一样
   child.$mount(hydrating ? vnode.elm : undefined, hydrating)
  }
 },

 prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
  const options = vnode.ponentOptions
  const child = vnode.ponentInstance = oldVnode.ponentInstance
  updateChildComponent(
   child,
   options.propsData, // updated props
   options.listeners, // updated listeners
   vnode, // new parent vnode
   options.children // new children
  )
 },

 insert (vnode: MountedComponentVNode) {
  const { context, ponentInstance } = vnode
  if (!ponentInstance._isMounted) {
   ponentInstance._isMounted = true
   // 触发组件的mounted钩子
   callHook(ponentInstance, 'mounted')
  }
  if (vnode.data.keepAlive) {
   if (context._isMounted) {
    queueActivatedComponent(ponentInstance)
   } else {
    activateChildComponent(ponentInstance, true / direct /)
   }
  }
 },

 destroy (vnode: MountedComponentVNode) {
  const { ponentInstance } = vnode
  if (!ponentInstance._isDestroyed) {
   if (!vnode.data.keepAlive) {
    ponentInstance.$destroy()
   } else {
    deactivateChildComponent(ponentInstance, true / direct /)
   }
  }
 }
}

const hooksToMerge = Object.keys(ponentVNodeHooks)

// 创建 vnode
 const vnode = new VNode(
  `vue-ponent-${Ctor.cid}${name ? `-${name}` : ''}`,
  data, undefined, undefined, undefined, context,
  { Ctor, propsData, listeners, tag, children },
  asyncFactory
 )

 function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
   const isReactivated = isDef(vnode.ponentInstance) && i.keepAlive
   // 执行组件钩子中的init钩子，创建组件实例
   if (isDef(i = i.hook) && isDef(i = i.init)) {
    i(vnode, false / hydrating /)
   }
   
   // init钩子执行后，如果vnode是个子组件，该组件应该创建一个vue子实例，并挂载到DOM元素上。子组件的vnode.elm也设置完成。然后我们只需要返回该DOM元素。
   if (isDef(vnode.ponentInstance)) {
    // 设置vnode.elm
    initComponent(vnode, insertedVnodeQueue)
    // 将组件的elm插入到父组件的dom节点上
    insert(parentElm, vnode.elm, refElm)
    if (isTrue(isReactivated)) {
     reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
    }
    return true
   }
  }
 }

// ... 省略其他代码
 init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
  if (
   vnode.ponentInstance &&
   !vnode.ponentInstance._isDestroyed &&
   vnode.data.keepAlive
  ) {
   // kept-alive ponents, treat as a patch
   const mountedNode: any = vnode // work around flow
   ponentVNodeHooks.prepatch(mountedNode, mountedNode)
  } else {
   // 生成组件实例
   const child = vnode.ponentInstance = createComponentInstanceForVnode(
    vnode,
    activeInstance
   )
   // 挂载组件，与vue的$mount一样
   child.$mount(hydrating ? vnode.elm : undefined, hydrating)
  }
 }
 // ...省略其他代码

export function createComponentInstanceForVnode (
 vnode: any, 
 parent: any,
): Component {
 // 内部组件选项
 const options: InternalComponentOptions = {
  // 标记是否是组件
  _isComponent: true,
  // 父Vnode
  _parentVnode: vnode,
  // 父Vue实例
  parent
 }
 // check inline-template render functions
 const inlineTemplate = vnode.data.inlineTemplate
 if (isDef(inlineTemplate)) {
  options.render = inlineTemplate.render
  options.staticRenderFns = inlineTemplate.staticRenderFns
 }
 // new 一个组件实例。组件实例化 与 new Vue() 执行的过程相同。
 return new vnode.ponentOptions.Ctor(options)
}

// 生成组件实例
const child = vnode.ponentInstance = createComponentInstanceForVnode(vnode, activeInstance)
// 挂载组件，与vue的$mount一样
child.$mount(hydrating ? vnode.elm : undefined, hydrating)

new VueComponent(options).$mount(hydrating ? vnode.elm : undefined, hydrating)