//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){
  //...省略其他無(wú)關(guān)代碼
  initAssetRegisters(Vue)
  //這個(gè)方法就是用于組件注冊(cè)的方法
}

//【代碼塊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轉(zhuǎn)換為一個(gè)繼承于Vue的構(gòu)造函數(shù)
      }
      //...其他類型的處理
      
      this.options[type+'s'][id] = definition //將這個(gè)構(gòu)造函數(shù)掛載到Vue.options.components上
      return definition
    }
  })
}

//【代碼塊3】
//代碼所在文件：src/core/instance/init.js
Vue.prototype._init = function(options){
  //..省略其他無(wú)關(guān)代碼
  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標(biāo)簽
    }else if(isDef(Ctor = resolveAsset(context.$options, 'component', tag))){
      //已經(jīng)注冊(cè)過(guò)的全局組件
      vnode = createComponent(Ctor, data, context, children, tag)
    }else{
      //不是內(nèi)置標(biāo)簽也不是已經(jīng)注冊(cè)過(guò)的組件，就創(chuàng)建一個(gè)全新的vnode
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
       )
    }
  }
}

//【代碼塊5】
//代碼所在文件：src/core/utils/options.js
export function resolveAsset(options, type, id, warnMissing){
   //options即上面調(diào)用的時(shí)候傳入的context.$options, 
   //由【代碼塊3】，vm.$options是由我們自定義的options以及Vue上的options合并而來(lái)的
   //type現(xiàn)在是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 //定義組件的那個(gè)對(duì)象
  )
  //...
}

//【代碼塊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中，我們已經(jīng)將局部組件放在了Sub.options上
 //所以這里將局部組件的構(gòu)造函數(shù)放在了vm.$options上
 //這樣在執(zhí)行【代碼塊4】的時(shí)候同樣也能通過(guò)resolveAsset得到局部注冊(cè)組件的構(gòu)造函數(shù)
 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
 }
}