Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?

<div id="アプリ">
  <私のボタン></私のボタン>
</div>
<スクリプト>
 Vue.component("my-button", {
    テンプレート: "<button> ボタンコンポーネント</button>",
   });
vm = new Vue({
	el:'#app'
});
</スクリプト>

Vue.options._base = Vue; //\_baseからvueを見つけることができます
Vue.options.components を次のように記述します。 

Vue.component = 関数 (id, 定義) {
  //各コンポーネントは、親を継承する新しいクラスを生成します。definition = this.options._base.extend(definition);

  console.log("1. Vue に基づいてコンポーネントのコンストラクターを作成する", definition);

  this.options.components[id] = 定義;
 };

'../util/index' から {mergeOptions} をインポートします
Vue.extend = 関数 (定義) {
  Vue.js は、次のコードで定義されます。
  const Sub = 関数 VueComponent(オプション) {
   this._init(オプション);
  };
  Sub.prototype = Object.create(Vue.prototype);
  Sub.prototype.constructor = Sub;
  Sub.options = mergeOptions(Vue.options, 定義); 
  Sub を返します。
 };

strats.components = 関数 (親値、子値) {
 オプションを Object.create(parentVal); に設定します。
 if (childVal) {
  for (let key in childVal) {
   オプション[キー] = childVal[キー];
  }
 }
 戻りオプション。
};

 Vue.prototype._init = 関数 (オプション) {
  定数 vm = this;
 ++ vm.$options = mergeOptions(vm.constructor.options, オプション); 
  //...
  初期化状態(vm);
  （vm.$options.el）の場合{
   //このテンプレートにデータをマウントします vm.$mount(vm.$options.el);
  }
 };

エクスポート関数isReservedTag(str) {
 reservedTag = "a,div,span,p,img,button,ul,li" とします。
 reservedTag.includes(str) を返します。
}

エクスポート関数 createElement(vm, タグ, データ = {}, ...children) {
  // タグがコンポーネントの場合、コンポーネントのvnodeをレンダリングする必要があります
  if (isReservedTag(タグ)) {
    vnode(vm, tag, data, data.key, children, undefined) を返します。
  } それ以外 {
    const Ctor = vm.$options.components[タグ]
    createComponent(vm、タグ、データ、データキー、子、Ctor) を返します。
  }
}
// コンポーネントと要素を区別するために、コンポーネントの仮想ノードを作成します。data.hook 
関数createComponent(vm, タグ, データ, キー, 子, Ctor) {
  // コンポーネントコンストラクタ if (isObject (Ctor)) {
    Ctor = vm.$options._base.extend(Ctor); // Vue.extend 
  }
  data.hook = { // この初期化メソッドはコンポーネントをレンダリングするときに呼び出す必要があります init(vnode){
      let vm = vnode.componentInstance = new Ctor({_isComponent:true}); // 新しい Sub はこのオプションとコンポーネント構成を使用してマージします vm.$mount(); // コンポーネントがマウントされると、vnode.componentInstance.$el に格納されます 
    }
  }
  vnode(vm,`vue-component-${tag}`,data,key,undefined,undefined,{Ctor,children}) を返します
}

エクスポート関数 patch(oldVnode,vnode){
  // 1. 更新するかレンダリングするかを決定する if(!oldVnode){
    createElm(vnode) を返します。
  }それ以外{
    // ...
  }
}

関数createElm(vnode) {
 {タグ、データ、子、テキスト、vm} = vnodeとします。
 if (typeof タグ === "文字列") {
  コンポーネントを作成する場合(vnode) {
   // コンポーネントに対応する実際のノードを返します return vnode.componentInstance.$el;
  }
  vnode.el = document.createElement(tag); // 仮想ノードには、実際のノードに対応するel属性が設定されます children.forEach((child) => {
   vnode.el.appendChild(Elm(child) を作成します);
  });
 } それ以外 {
  vnode.el = document.createTextNode(テキスト);
 }
 vnode.el を返します。
}

関数createComponent(vnode) {
  i = vnode.data とします。
  if((i = i.hook) && (i = i.init)){
    i(vnode);
  }
  if(vnode.componentInstance){
    true を返します。
  }
}

データ.フック = {
  init(vnode){
    子を vnode.componentInstance に新しい Ctor({}) として追加します。
    child.$mount(); // コンポーネントのマウント}
}