序文
通常のプログラミングでは、テンプレートを使ってhtmlを作成することがほとんどです。ただし、テンプレートメソッドを使用する場合、特殊な場合に要件を十分に満たせない場合があり、その際には JavaScript のプログラミング能力が必要となります。この時点で、render 関数の出番です。
レンダーの役割
公式サイトの例では、コンポーネントを利用して同じ内容をsolt経由でh1～h6タグに入れていますが、従来の方法だとコードが長くなるだけでなく、各レベルのタイトルに繰り返し記述してしまいます。要素を固定するときに繰り返しを再度挿入します。render 関数を使用すると、コードが大幅に簡素化されます。
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
レンダリング関数の機能は、テンプレートをシーンに実装すると、コードが冗長で煩雑で繰り返しが多くなる場合に、これを使用することでコードを大幅に簡素化することができます。
レンダリング機能の説明
render 関数を使用する場合、パラメータ createElement が使用されます。この createElement パラメータも本質的に関数であり、vue で仮想 dom を構築するために使用されるツールです。このcreateElementの周りを見てみましょう。
createelement メソッドには、次の 3 つのパラメータがあります。
return createEement(, {
}, [])
- 最初のパラメータ (必須パラメータ): 主に dom に HTML コンテンツを提供するために使用され、タイプは文字列、オブジェクト、または関数です。
- 2 番目のパラメータ (オブジェクト タイプ、オプション): この DOM 内のいくつかのスタイル、属性、渡されたコンポーネントのパラメータ、バインディング イベントなどを設定するために使用されます。
- 3 番目のパラメーター (型は配列、配列要素の型は VNode、オプション): 主に、他の新しいコンポーネントなどの配布コンテンツを設定するために使用されます。
注: コンポーネント ツリー内のすべての vnode は一意である必要があります
。 createElement パラメーターを渡して仮想ノードを作成し、レンダリングするノードを返します。
一般に、レンダリング関数の本質は仮想ノードを作成することです。
レンダーとテンプレートの違い
類似点:
render 関数は、HTML テンプレートを作成するテンプレートと同じです。
違い：
- テンプレートは単純なロジックに適しており、レンダリングは複雑なロジックに適しています。
- ユーザー テンプレートは比較的理解しやすいですが、柔軟性が十分ではありません。カスタム レンダリング関数は柔軟性が高いですが、ユーザーに対する要件が高くなります。
- レンダリングのパフォーマンスは高く、テンプレートのパフォーマンスは低いです。
- 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を生成
render 関数を使用する前に、テンプレート タグを削除し、ロジック層のみを保持する必要があります。
渡された型を使用してクラスに動的に入力し、inderText を使用してコンテンツを DOM に追加します。
render(h) {
return h('div', {
class: {
btn: true,
'btn-success': this.type === 'success',
'btn-danger': this.type === 'danger',
'btn-warning': this.type === 'warning'
},
domProps: {
innerText: this.text
},
on: {
click: this.handleClick
}
});
},