VUE レンダリング機能の使い方と詳細な説明

序文

通常のプログラミングでは、ほとんどの場合、HTML はテンプレートを通じて作成されます。ただし、特殊なケースでは、テンプレート方式ではニーズを十分に満たすことができません。このとき、操作するには JavaScript プログラミングスキルが必要です。この時点で、レンダリング機能がその威力を発揮します。

レンダリングの役割

公式サイトのサンプルエントリー

公式サイトのこの例では、solt を通じて h1-h6 タグに同じ内容を入れるためにコンポーネントが使用されています。従来の方法を使用すると、コードが長くなるだけでなく、タイトルの各レベルに<slot></slot>が繰り返し記述され、アンカー要素を挿入するときに再度繰り返す必要があります。レンダリング関数を使用すると、コードがはるかに簡単になります。

Vue.component('アンカー付き見出し', {
  レンダリング: 関数 (createElement) {
    要素の作成を返す(
      'h' + this.level, // タグ名 this.$slots.default // 子ノード配列)
  },
  小道具: {
    レベル：
      タイプ: 数値、
      必須: true
    }
  }
})

レンダリング関数の役割は、シーン内のテンプレートによって実装されたコードが長くて扱いにくく、繰り返しが多い場合に、コードを大幅に簡素化することです。

レンダリング機能の説明

レンダリング関数を使用する場合、createElement パラメータが使用されます。この createElement パラメータも本質的には関数であり、Vue で仮想 DOM を構築するために使用されるツールです。 createElement を見てみましょう。

createelement メソッドには、次の 3 つのパラメーターがあります。

createEement(, {}, []) を返します

1. 最初のパラメータ（必須パラメータ）: 主に DOM で HTML コンテンツを提供するために使用されます。タイプは文字列、オブジェクト、または関数です。

2. 2 番目のパラメータ (オブジェクトタイプ、オプション): この DOM 内の渡されたコンポーネントのスタイル、属性、パラメータ、バインディングイベントなどを設定するために使用されます。

3. 3 番目のパラメータ (型は配列、配列要素の型は VNode、オプション): 主に、新しく追加されたその他のコンポーネントなどの配布コンテンツを設定するために使用されます。

注意: コンポーネントツリー内のすべてのvnodeは一意である必要があります

createElement パラメータを渡すと、仮想ノードが作成され、そのノードがレンダリングに返されます。

一般的に、レンダリング機能の本質は仮想ノードを作成することです。

レンダリングとテンプレートの違い

類似点:

render関数はtemplateと同様にHTMLテンプレートを作成する。

違い:

Templateは単純なロジックに適しており、レンダリングは複雑なロジックに適しています。
templateユーザーにとって比較的理解しやすいですが、柔軟性に欠けます。カスタムレンダリング機能は非常に柔軟ですが、ユーザーに対する要件は高くなります。
renderのパフォーマンスは高く、テンプレートのパフォーマンスは低くなります。
レンダリングに render 関数を使用する場合、コンパイルプロセスは発生しません。これは、ユーザーがプログラムに直接コードを与えるのと同じです。したがって、これを使用するには高いユーザー要件が必要となり、エラーが発生しやすくなります。
Render関数の優先度はテンプレートの優先度よりも高くなりますが、Mustache (二重中括弧) 構文は再度使用できないことに注意してください。

注意: テンプレートとレンダリングは一緒に使用できません。そうしないと無効になります。

レンダリング例

たとえば、共通のボタンコンポーネントのセットを一度にカプセル化すると、ボタンには 4 つのスタイル (成功、エラー、警告、デフォルト) が設定されます。

テンプレートメソッドは次のとおりです。

 <div class="btn btn-success" v-if="type === 'success'">{{ text }}</div>
 <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div>
 <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>

ボタンの数が少ない場合はこれで問題ありませんが、ボタンの数が増えると非常に長くなります。このとき、レンダリング機能が必要になります。

状況に応じてボタンDOMを生成する

レンダリング機能を使用する前に、テンプレートタグを削除し、ロジックレイヤーのみを保持する必要があります。

クラスは渡された型を通じて動的に入力され、コンテンツは inderText を通じて DOM に追加されます。

レンダリング(h) {
  h('div', { を返す
   クラス： {
    ボタン: 真、
    'btn-success': this.type === 'success'、
    'btn-danger': this.type === 'danger'、
    'btn-warning': this.type === 'warning'
   },
   domProps: {
    内部テキスト: this.text
   },
   の上： {
    クリック: this.handleClick
   }
  });
 },