Vueを学ぶ

第7章. 高度なレンダリング、ダイナミック・コンポーネント、プラグイン合成

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

前の章では、Vueの仕組み、Options APIとComposition APIを使ったコンポーネントの合成方法、Axiosを使って外部リソースのデータをVueアプリケーションに取り込む方法について学んだ。

この章では、Vueにおけるレンダリングのより高度な側面を紹介する。レンダリング関数とJSXを使って関数型コンポーネントを計算する方法と、Vueのコンポーネントタグを使って要素を動的かつ条件付きでレンダリングする方法を探る。また、アプリケーション内で使用するカスタムプラグインの登録方法についても学ぶ。

レンダー関数とJSX

VueコンパイラAPIにより、Vueはレンダリング時に、Vueコンポーネントに使用されるすべてのHTMLテンプレートを処理し、Virtual DOMにコンパイルする。Vueコンポーネントのデータが更新されると、Vueは内部のレンダー関数をトリガーして、最新の値をVirtual DOM に送信する。

template 、コンポーネントを作成する最も一般的な方法である。しかし、パフォーマンスの最適化、サーバ側レンダリング・アプリケーションでの作業、ダイナミック・コンポーネント・ライブラリでの作業など、特定のシナリオではHTMLテンプレート・パーサーのプロセスをバイパスする必要がある。仮想DOMからレンダリングされた仮想ノードを直接返し、テンプレートのコンパイル処理をスキップすることで、render() 、このような場合の解決策となる。

レンダー関数を使う

Vue 2では、render() 関数のプロパティは、createElement コールバックパラメータを受け取る。この関数は、適切な引数で をトリガすることによって、有効な VNode¹createElement を適切な引数でトリガーする。通常、createElement をh 関数と呼ぶ。²

例7-1は、Vue 2の構文でコンポーネントを作成する例を示している。

例7-1. Vue 2でrender関数を使用する

const App = {
 render(h) {
  return h(
   'div',
   { id: 'test-id' },
   'This is a render function test with Vue'
  )
 }
}

このコードは、以下のテンプレート・コード を書くことに等しい：

const App = {
 template: `<div id='test-id'>This is a render function test with Vue</div>`
}

Vue 3では、render の構文が大きく変わった。h 関数をパラメータとして受け付けなくなった。その代わりに、vue パッケージは、VNode を作成するためのグローバル関数h を公開している。したがって、例7-1のコードを例7-2のように書き換えることができる。

例7-2. Vue 3でrender関数を使用する

import { createApp, h } from 'vue'

const App = {
 render() {
  return h(
   'div',
   { id: 'test-id' },
   'This is a render function test with Vue' ...