Vue 源码-Component

• 全局组件在源码中如何定义的
  下图是Vue 初始化全局方法,其中包括 component,filter,directive,use,mixin,util,extend 方法

  
  src/core/index.js
  

  initGlobalApi 实现如下所示.图中标注的初始化的components,directives. 注意 ASSET_TYPES是 component,direcrive,filter

  
  src/core/global-api/index.js
  ASSET_TYPES
  在初始化完成Vue.component 方法之后执行initAssetRegisters,完成 Vue 全局方法的注册
  initAssetRegisters
  

  initAssetRegisters函数执行情况如下图所示
  Vue[type]在 Vue 上注册 Component,directive,filter 方法.在第二处标记中其实就是 Vue.extend()函数的调用.返回一个构造函数,并且把这个构造器保存到上一步 创建的 Vue.components对象中,并且把组件的 id 为 key,方便后面查找

  
  src/core/global-api/assets.js

• 根据 Render 函数创建的情况,会调用_c 函数

  
  src/core/instance/render.js
  

  createElement函数如下所示

  
  src/core/vdom/create-element.js
  _createElement 函数如下所示.首先根据条件判断是不是组件,如果是组件的化,拿出刚才保存指定组件保存的构造函数. 是通过resolveAsset函数返回的.
  src/core/vdom/create-element.js
  

  createComponent 函数如下图所示

  
  src/core/vdom/create-component.js
  createComponent函数中通过installComponentHooks函数挂载钩子
  src/core/vdom/create-component.js
  installComponentHooks钩子中包括有init,prepatch,destory
  src/core/vdom/create-component.js
  createComponentInstanceForVnode函数是创建一个虚拟 dom用来挂载.
  src/core/vdom/create-component.js

• init 何时挂载
  在调用createElm函数的时候,会判断是不是组件.如下图所示

  
  src/core/vdom/patch.js
  

  createComponent函数如下所示.

  
  src/core/vdom/patch.js

总结

1. Vue 在初始化的时候初始化全局对象 Components 对象用于保存组件的构造函数
2. 然后在 asset中给 Vue 注册 Component 方法.每当我们调用 Vue.component()函数的时候,都会像 Vue.componets 中保存一个构造函数
3. 当通过 render 函数生成函数的时候,会调用_c 函数,其实就是调用 initRender 函数中的_c 函数.
4. 通过_c 会给 Vue 挂载钩子,其中包括 init 钩子函数.
   5.当父类组件开始挂载时候,调用 path 函数,path 在比较的时候,会更加是标签还是组件.如果是组件的化,会通过调用createComponent函数,在createComponent函数中会调用初始化的挂载的 hook中的 init 钩子.会通过组件的构造函数创建一个虚拟 dom.同时会挂载到指定真实节点上面.从而会继续重复上述行为.从而完成整个 vnode 的渲染.完成整个过程