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

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

序文

この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。

Vue.componentを通じてグローバルコンポーネントを登録し、テンプレートで使用することができます。

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

グローバルコンポーネント解析の原則

コンポーネントの分離を保証するために、各コンポーネントは extend メソッドを通じて新しいクラスを生成し、親クラスを継承します。そして、ユーザーが Vue.component メソッドを通じて渡した opts を vue.options.components にマージし、vue が初期化されるときに Vue.options.components と vm.$options.components をマージします。

1. Vue.component メソッド

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] = 定義;
 };

2. Vue.extend メソッド

extend メソッドは、Vue から継承し、親クラスのすべての機能を持つクラスを生成します。

'../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 を返します。
 };

3. 属性の結合

Vue.options と Vue.component(definition) によって渡された定義をマージします。

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

4. マージを初期化する

Vue.options.components と vm.$options.components をマージする

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

さて、ここではグローバル コンポーネントの解析を実装しました。

次に、Kang Kang コンポーネントがどのようにレンダリングされるかを見てみましょう。

コンポーネントレンダリングの原則

仮想ノードを作成するときは、isReservedTag を使用して、現在のタグがコンポーネントであるかどうかを判断する必要があります。共通タグの仮想ノードは、コンポーネントの仮想ノードとは異なります。タグがコンポーネントである場合は、コンポーネント vnode をレンダリングする必要があります。

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

1. コンポーネント仮想ノードを作成する

createComponentはコンポーネントの仮想ノードを作成し、データにフックがあるかどうかでコンポーネントかどうかを区別します。

エクスポート関数 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}) を返します
}

2. コンポーネントの実際のノードを作成する

typeof tag === "string" の場合、コンポーネントの仮想ノードである可能性があり、createComponent が呼び出されます。

エクスポート関数 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は、データにhook.initメソッドがあるかどうかによって、コンポーネントが仮想ノードであるかどうかを判断します。

はいの場合は、コンポーネントでdata.hook.initを呼び出します。

コンポーネントインスタンスを作成し、vnode.componentInstanceに割り当てます。

vnode.componentInstance に値がある場合、対応するコンポーネントの実際の DOM が生成されたことを意味します。

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

initメソッドを呼び出してコンポーネントのインスタンスを作成し、マウントします。

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

まとめ

新しいコンポーネント (). $mount () => vm. $el

コンポーネントの$elを親コンテナ(親コンポーネント)に挿入します。

完了しました!

上記は、Vue コンポーネントがどのように解析され、レンダリングされるかを示しています。 Vue コンポーネントの解析とレンダリングの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue の動的コンポーネントと非同期コンポーネントの詳細な理解
  • Vue が Ref を使用してレベル間でコンポーネントを取得する手順
  • Vueはマルチタブコンポーネントを実装します
  • Vue再帰コンポーネントの簡単な使用例
  • Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します
  • Vue の親コンポーネントと子コンポーネント間の通信の例 (props、$ref、$emit)
  • Vue マウントコンポーネントの使用
  • Vue は他のコンポーネント (css と js) をどのように参照しますか
  • vue-dialog のポップアップ レイヤー コンポーネント
  • Vueコンポーネントの基本のまとめ

<<:  Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します

>>:  ランダムな文字を生成する Java サンプルコード

推薦する

HTML タグ dl dt dd 使用方法

基本構造:コードをコピーコードは次のとおりです。 <ダウンロード> <dt>...

CSS リセットスタイルリセットの実装例

はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのペ...

MySQL 検査スクリプト (必読)

以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...

製品を選択した後、右下隅に√記号を表示するための純粋なCSS

おすすめの記事: CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます...

Linux で固定 IP を設定する方法 (テスト済みで効果的)

まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...

MySQLクエリ構文の概要

序文:この記事では主に、MySQL の where、group by、order by、limit、...

Linux で MySQL データベースのデータ ファイル パスを変更する手順

rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...

vue-router を遅延ロードする 3 つの方法のまとめ

遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...

スタックメニューを実装するためのjQueryプラグイン

jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...

Vue でのルータービューコンポーネントの使用に関する詳細な説明

Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることが...

ウェブページの内部アンカーポイントを実現するための純粋なCSSの上下オフセットコード例

最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...

効果的なウェブフォームのための 8 つのルール

ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...

テーブルを使用する場合と CSS を使用する場合 (経験の共有)

TW のメインテキスト ページは、以前は小さなモニターと低解像度のユーザーを考慮して幅が 850 ピ...

HTMLポップアップdivはモバイルの中央揃えを実現するのに非常に便利です

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...