详解vue 组件注册

//main.js 
import Vue from 'vue' 
import App from './App' 
import router from './router' 
Vue.config.productionTip = false 

let Hello = { 
  name: 'hello', 
  template: '这是全局组件hello' 
} 
Vue.component('hello', Hello) 
new Vue({ 
  el: '#app', 
  router, 
  components: { App }, 
  template: '' 
})

 <template>
 <div id="app">
  <img src="./assets/logo.png">
  <HelloWorld/>
 </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
 name: 'App',
 components:{
  HelloWorld
 }
}
</script>

//【代码块1】
//代码所在文件：src/core/global-api/index.js
export function initGlobalAPI(Vue: GlobalAPI){
  //...省略其他无关代码
  initAssetRegisters(Vue)
  //这个方法就是用于组件注册的方法
}

//【代码块2】
//代码所在文件：src/core/global-api/assets.js
export function initAssetRegister(Vue){
  ASSET_TYPES.forEach(type=>{
    //ASSET_TYPES包括component、directive、filter
    Vue[type] = function(id, definition){
      //...一些条件判断
      if(type === 'component' && isPlainObject(definition)){
        definition.name = definition.name || id 
        definition = this.options._base.extend(definition) 
        //将definition转换为一个继承于Vue的构造函数
      }
      //...其他类型的处理
      
      this.options[type+'s'][id] = definition //将这个构造函数挂载到Vue.options.components上
      return definition
    }
  })
}

//【代码块3】
//代码所在文件：src/core/instance/init.js
Vue.prototype._init = function(options){
  //..省略其他无关代码
  if(options && options._isComponent){ //组件
    initInternalComponent(vm, options)
  }else{ //非组件
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options||{},
      vm
    )
  }
}

//【代码块4】
//代码所在文件：src/core/vdom/create-element.js
export function _createElement(context, tag, data, children, normalization){
  if(typeof tag === 'string'){
    //...
    if(config.isReservedTag(tag)){
      //...保留的html标签
    }else if(isDef(Ctor = resolveAsset(context.$options, 'component', tag))){
      //已经注册过的全局组件
      vnode = createComponent(Ctor, data, context, children, tag)
    }else{
      //不是内置标签也不是已经注册过的组件，就创建一个全新的vnode
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
       )
    }
  }
}

//【代码块5】
//代码所在文件：src/core/utils/options.js
export function resolveAsset(options, type, id, warnMissing){
   //options即上面调用的时候传入的context.$options, 
   //由【代码块3】，vm.$options是由我们自定义的options以及Vue上的options合并而来的
   //type现在是components
    
   const assets = options[type]
   // check local registration variations first
   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]
   // fallback to prototype chain
   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
 }

//【代码块5】
//代码所在文件：src/core/global-api/extend.js
Vue.entend = function(extendOptions){
  //...
  Sub.options = mergeOptions(
     Super.options, //Vue的options
     extendOptions //定义组件的那个对象
  )
  //...
}

//【代码块6（同代码块3）】
//代码所在文件：src/core/instance/init.js
Vue.prototype._init = function(options){
  //..  
  if(options && options._isComponent){
    initInternalComponent(vm, options)
  }else{
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options||{},
      vm
    )
  }
}

//【代码块7】
//代码所在文件：src/core/instance/init.js
export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
 const opts = vm.$options = Object.create(vm.constructor.options) 
 //vm.constructor即为Sub,在代码块5中，我们已经将局部组件放在了Sub.options上
 //所以这里将局部组件的构造函数放在了vm.$options上
 //这样在执行【代码块4】的时候同样也能通过resolveAsset得到局部注册组件的构造函数
 const parentVnode = options._parentVnode
 opts.parent = options.parent
 opts._parentVnode = parentVnode

 //将componentOptions里面的别的属性赋值给opts
 const vnodeComponentOptions = parentVnode.componentOptions
 opts.propsData = vnodeComponentOptions.propsData
 opts._parentListeners = vnodeComponentOptions.listeners
 opts._renderChildren = vnodeComponentOptions.children
 opts._componentTag = vnodeComponentOptions.tag

 if (options.render) {
  opts.render = options.render
  opts.staticRenderFns = options.staticRenderFns
 }
}