摘要：定義一個(gè)組件如下打印如下再回過頭看，可以發(fā)現(xiàn)他做的工作就是擴(kuò)展一個(gè)構(gòu)造函數(shù)，并將這個(gè)構(gòu)造函數(shù)添加到現(xiàn)在我們已經(jīng)可以回答最開始的問題的組件是什么的組件其實(shí)就是擴(kuò)展的構(gòu)造函數(shù)，并且在適當(dāng)?shù)臅r(shí)候?qū)嵗癁閷?shí)例。

本篇文章從最簡(jiǎn)單的情況入手，不考慮prop和組件間通信。

vue文檔告訴我們可以使用Vue.component(tagName, options)注冊(cè)一個(gè)組件

Vue.component("my-component", {
  // 選項(xiàng)
})

毫無疑問這是一個(gè)全局API，我們順著代碼最終可以找到Vue.component是這樣的

Vue.component = function(id, definition) {
    definition.name = definition.name || id
    definition = Vue.extend(definition)
    this.options[type + "s"][id] = definition
    return definition    
}

Vue.component實(shí)際上是Vue.extend的封裝，Vue.extend如下：

Vue.extend = function (extendOptions: Object): Function {
  extendOptions = extendOptions || {}
  const Super = this
  const isFirstExtend = Super.cid === 0
  if (isFirstExtend && extendOptions._Ctor) {
    return extendOptions._Ctor
  }
  let name = extendOptions.name || Super.options.name
  const Sub = function VueComponent (options) {
    this._init(options)
  }
  Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub
  Sub.cid = cid++
  Sub.options = mergeOptions(
    Super.options,
    extendOptions
  )
  Sub["super"] = Super
  // allow further extension
  Sub.extend = Super.extend
  // create asset registers, so extended classes
  // can have their private assets too.
  config._assetTypes.forEach(function (type) {
    Sub[type] = Super[type]
  })
  // enable recursive self-lookup
  if (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.options
  Sub.extendOptions = extendOptions
  // cache constructor
  if (isFirstExtend) {
    extendOptions._Ctor = Sub
  }
  return Sub
}

可以看到Vue.extend返回的實(shí)際上是一個(gè)構(gòu)造函數(shù)Sub，并且此構(gòu)造函數(shù)繼承自Vue。里面有這么幾行代碼

  Sub.options = mergeOptions(
    Super.options,
    extendOptions
  )

那么Super.options（即Vue.options）是什么呢？

  Vue.options = Object.create(null)
  //  包含components directives filters
  config._assetTypes.forEach(type => {
    Vue.options[type + "s"] = Object.create(null)
  })

  util.extend(Vue.options.components, builtInComponents)

Vue.options事實(shí)上存放了系統(tǒng)以及用戶定義的component、directive、filter，builtInComponents為Vue內(nèi)置的組件（如keep-alive），打印看下：

所以Sub構(gòu)造函數(shù)的options不僅包含components、directives、filters，還包含預(yù)先定義的實(shí)例化時(shí)所需的選項(xiàng)。定義一個(gè)組件如下：

let MyComponent = Vue.extend({
    data() {
        return {
            msg: "this"s compoennt"
        }
    },
    render(h) {
        return h("p", this.msg)
    }
})

打印MyComponent.options如下：

再回過頭看Vue.component，可以發(fā)現(xiàn)他做的工作就是擴(kuò)展一個(gè)Vue構(gòu)造函數(shù)（VueComponent），并將這個(gè)構(gòu)造函數(shù)（VueComponent）添加到Vue.options.components

現(xiàn)在我們已經(jīng)可以回答最開始的問題---vue的組件是什么？vue的組件其實(shí)就是擴(kuò)展的Vue構(gòu)造函數(shù)，并且在適當(dāng)?shù)臅r(shí)候?qū)嵗癁閂ue實(shí)例。

組件對(duì)應(yīng)的vnode是什么樣子？從一個(gè)簡(jiǎn)單的例子入手：

let MyComponent = Vue.component("my-component", {
    data() {
        return {
            msg: "this"s component"
        }
    },
    render(h) {
        return h("p", this.msg)
    }
})

window.app = new Vue({
    render(h) {
        return h("my-component")
    }
}).$mount("#root")

上篇文章已經(jīng)說道在initRender的時(shí)候會(huì)初始一個(gè)系統(tǒng)watcher，如下：

vm._watcher = new Watcher(vm, () => {
  vm._update(vm._render(), hydrating)
}, noop)

上篇文章提到vm._render()返回的是一個(gè)虛擬dom（vnode），具體到本篇，那么組件標(biāo)簽會(huì)被解析成什么樣的虛擬節(jié)點(diǎn)呢？

事實(shí)上render的時(shí)候會(huì)首先調(diào)用createElement，根據(jù)傳入的tag（html標(biāo)簽或者組件標(biāo)簽）不同，vnode可以分為以下兩種：

platform built-in elements

這種就是普通的html標(biāo)簽（p、div、span等）對(duì)應(yīng)的vnode

component

當(dāng)tag是組件標(biāo)簽的時(shí)候，會(huì)調(diào)用createComponent，如下：

    else if ((Ctor = resolveAsset(context.$options, "components", tag))) {
      // component
      
      return createComponent(Ctor, data, context, children, tag)
    }

這里的Ctor就是我們擴(kuò)展的組件構(gòu)造函數(shù)，createComponent最終返回的vnode如下：

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

需要注意的是data有一個(gè)操作：

  // merge component management hooks onto the placeholder node
  mergeHooks(data)

merge之后data.hook會(huì)添加四個(gè)方法：

init 實(shí)例化組件時(shí)調(diào)用

prepatch patch之前調(diào)用

insert 真實(shí)節(jié)點(diǎn)插入時(shí)調(diào)用

destory 組件實(shí)例銷毀時(shí)調(diào)用

前文看到組件構(gòu)造函數(shù)實(shí)際上是存在組件對(duì)應(yīng)vnode的componentOptions中，那么究竟是什么時(shí)候?qū)嵗M件呢？

順著vm._update(vm._render(), hydrating)往下看發(fā)現(xiàn)最終調(diào)用的是patch操作，而對(duì)于組件實(shí)例化而言并不存在與之對(duì)應(yīng)的oldVnode（因?yàn)閛ldVnode是在組件更新后產(chǎn)生的），所以最終的邏輯歸到根據(jù)組件對(duì)應(yīng)的vnode創(chuàng)建真實(shí)dom節(jié)點(diǎn)，即

createElm(vnode, insertedVnodeQueue)

我們還記得組件的構(gòu)造函數(shù)是vnode.componentOptions.Ctor，其實(shí)最終調(diào)用的也是這個(gè)構(gòu)造函數(shù)。

createElm函數(shù)中與組件初始化相關(guān)的關(guān)鍵代碼如下：

    const data = vnode.data
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.init)) i(vnode)

      if (isDef(i = vnode.child)) {
        initComponent(vnode, insertedVnodeQueue)
        return vnode.elm
      }
    }

init的代碼如下：

function init (vnode: VNodeWithData, hydrating: boolean) {
  if (!vnode.child || vnode.child._isDestroyed) {
    const child = vnode.child = createComponentInstanceForVnode(vnode, activeInstance)
    child.$mount(hydrating ? vnode.elm : undefined, hydrating)
  }
}


export function createComponentInstanceForVnode (
  vnode: any, // we know it"s MountedComponentVNode but flow doesn"t
  parent: any // activeInstance in lifecycle state
): Component {
  const vnodeComponentOptions = vnode.componentOptions
  const options: InternalComponentOptions = {
    _isComponent: true,
    parent,
    propsData: vnodeComponentOptions.propsData,
    _componentTag: vnodeComponentOptions.tag,
    _parentVnode: vnode,
    _parentListeners: vnodeComponentOptions.listeners,
    _renderChildren: vnodeComponentOptions.children
  }
  // check inline-template render functions
  const inlineTemplate = vnode.data.inlineTemplate
  if (inlineTemplate) {
    options.render = inlineTemplate.render
    options.staticRenderFns = inlineTemplate.staticRenderFns
  }

  return new vnodeComponentOptions.Ctor(options)
}

經(jīng)過init之后可以看到組件vnode.child對(duì)應(yīng)的就是組件的實(shí)例，且child.$el即為組件對(duì)應(yīng)的真實(shí)dom，但是實(shí)際上createElm返回的是vnode.elm，怎么回事？事實(shí)上initComponent
中做了處理

vnode.elm = vnode.child.$el

綜上，組件實(shí)例化是在由虛擬dom映射為真實(shí)dom時(shí)完成的。

寫到這里已經(jīng)對(duì)組件機(jī)制有了初步的認(rèn)識(shí)，數(shù)據(jù)的傳遞、父子組件通信本文并沒有涉及，留到以后再看。