vue3でのJSXの使い方を詳しく解説した記事

vue で JSX を使用するにはどうすればよいですか? vue3でのJSXの使い方については以下の記事で紹介していますので、ご参考になれば幸いです。

Vue では、ほとんどの場合、テンプレート <template></template> 構文を使用してアプリケーションを作成することをお勧めします。

Vue 3 プロジェクト開発では、テンプレートが Vue 3 のデフォルトの記述方法です。テンプレートは HTML のように見えますが、Vue は実際にはテンプレートをレンダリング関数に解析し、コンポーネントの実行時にレンダリング関数を通じて仮想 DOM を返します。 [学習ビデオ共有: vue ビデオ チュートリアル 、Web フロントエンド ビデオ ]

ただし、使用シナリオによっては、JavaScript の完全なプログラミング機能を実際に使用する必要があります。このとき、レンダリング機能が役に立ちます。

h 関数

Vue は、vnodes 仮想 dom を作成するための h() 関数を提供します。次の例: コンポーネントで

import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

を使用するにはどうすればよいですか?

以前、複合 API がテンプレートで使用されていたときは、setup() フックの戻り値を使用してデータをテンプレートに公開していました。ただし、h() を使用する場合、setup() フックは レンダリング関数 を返します。

import { ref, h } from 'vue'

export default {
  props: {
    /* ... */
  },
  setup(props) {
    const count = ref(1)

    // 返回渲染函数
    return () => h('div', props.msg + count.value)
  }
}

手書きの h 関数はさらに処理できます。ダイナミックなシーン。ただし、複雑なシーンの場合、 h 関数を記述するのは非常に面倒で、すべての属性を自分でオブジェクトに変換する必要があります。また、コンポーネントがネストされると、オブジェクトは非常に複雑になります。ただし、h 関数は仮想 DOM も返すため、h 関数をより便利に記述する方法はあるでしょうか?答えは「はい」です。その方法は JSX です。

JSX

JSX は JavaScript の XML に似た拡張機能で、これを使用すると簡単な方法で vnode を作成できます。 JavaScript で HTML を記述するための構文は JSX と呼ばれ、JavaScript 構文を拡張したものです。上記のコードを JavaScript 環境で直接実行すると、エラーが報告されます。 JSX の本質は、次のコードの糖衣構文です。

const vnode = <div id="app">hello</div>

実際には、仮想 DOM を返すために、h 関数内でも createVnode が呼び出されます。

それでは、Vue プロジェクトで JSX を使用するにはどうすればよいでしょうか?

デフォルトでは、vue3 vite プロジェクトは jsx をサポートしていません。jsx をサポートしたい場合は、プラグイン

@vitejs/plugin-vue-jsxx

# をインストールする必要があります。 ##インストール

const vnode = createVnode('div',{id:"app"}, 'hello')

vite.config.js で設定します:

npm i @vitejs/plugin-vue-jsx -D

その後、Vue コンポーネントで使用できます:

import vueJsx from "@vitejs/plugin-vue-jsx"; // 配置vue使用jsx

export default defineConfig({
  plugins: [
    vue(), 
    vueJsx()
  ],
});

注: langスクリプトを jsx に変更する必要があります。

または jsx ファイル:

// render.vue
<script>
import { ref } from "vue";
export default {
  setup() {
    const count = ref(100);
    return () => <div>count is: {count.value}</div>;
  },
};
</script>

テンプレートと JSX

JSX とテンプレートはどのように選択すればよいですか?

テンプレートの利点: テンプレートの構文は固定されており、v-if、v-for などのみです。この固定形式の構文に従って記述すると、Vue3 はコンパイル レベルで静的タグを簡単に最適化し、Diff プロセスを削減できます。たとえば、静的プロモーション、タイプタグ、ツリー構造のバランシングなどにより、仮想 DOM ランタイムのパフォーマンスを向上させることができます。これは、Vue 3 の仮想 DOM が Vue 2 よりも高速である重要な理由でもあります。

参考:

Vue レンダリング メカニズム

JSX の利点: テンプレートは、構文制限のため、JSX のようなより動的なニーズをサポートできません。これは、テンプレートと比較した JSX の利点でもあります。

JSX には、1 つのファイルで複数のコンポーネントを返すことができるという点で、テンプレートに比べてもう 1 つの利点があります。

どうやって選べばいいの？

ビジネス ニーズを実現する場合は、テンプレートの使用を優先し、Vue 独自のパフォーマンス最適化を最大限に活用してください。より高い動的要件を持つコンポーネントは、JSX を使用して実装できます。 (たとえば、後で JSX を使用して動的フォーム ジェネレーターを実装します)

概要

まず第一に、通常、プロジェクトでアプリケーションを作成するためにテンプレート テンプレートを使用します。 、テンプレートテンプレートは、ビルドフェーズ中にレンダリングレンダリング関数にコンパイルされます。レンダリング関数は仮想DOMを返す関数です。

その後、実際にはこのステップをスキップして、 h 関数を直接使用して仮想 DOM を生成できます。

h 関数の内部実行は、実際には仮想 DOM を生成する createVNode 関数ですが、h 関数は記述が難しいため、より便利かつ迅速に記述するために JSX を使用します。 createVNode 関数は実際には JSX の内部で使用されます。

JSX は JavaScript で直接実行できません。vite プロジェクトでは、プラグイン

@vitejs/plugin-vue-jsxx

をインストールして設定する必要があります。それに応じてその時だけ。

最後に、テンプレートと JSX の長所と短所を比較します。テンプレートの利点は、その構文が固定されており、記述が簡単であることです。コンパイル レベルでは、Vue3 はテンプレートのコンパイルに対して多くの最適化を行っています。 JSX の利点は柔軟性にあり、動的要件が高い場合には、JSX が標準構成になっています。

よく言われるように、アート業界には専門分野があります。テンプレートと JSX において、どちらよりも強力なものはありません。それぞれに、さまざまなシナリオで独自の長所と短所があります。どちらも強力なプログラミング ツールです。適切に使用された場合。

(終了)

(学習ビデオ共有: Web フロントエンド開発、基本プログラミング ビデオ)

以上がvue3でのJSXの使い方を詳しく解説した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。