Vue3 - あなたが知りたいことすべて

9月 28, 2022 7 ミン

内容

JavaScript ライブラリからフレームワークまで、Vue の旅は印象的です。特に、軽量な性質をどのように維持しているのかを考えるとなおさらです。状態管理を容易にする Pinia や、Vite で動作するビルドツールチェーンなど、Vue3 が提供するいくつかの機能があります。アプリを Vue3 に更新する場合でも、単にフレームワークを試してみたい場合でも、Vue3 について知っておく必要があるすべてのことをここにまとめました。

Vue3とは？

Vue3 で見られる変更に入る前に、まず Vue.js とそのコアコンポーネントが何であるかを見てみましょう。

ビュー

Vue.js は、ユーザーインターフェイスの作成に使用できるオープンソースのフロントエンドJavaScript フレームワークです。このフレームワークは、ユーザーディスプレイの迅速な開発を支援する宣言型のコンポーネントベースのコーディングアプローチを提供します。基本的または複雑なインターフェースの開発に使用でき、業界標準の HTML、CSS、および JavaScript の上に構築されています。 Vue.js の人気と Vue.js の大規模なユーザーベースの理由は、プログラマーにとって使いやすい構文、使いやすさ、明確に定義されたドキュメントです。

vue

前述のように、Vue.js は次の 2 つのコア特性に基づいて構築されています。

宣言型レンダリングにより、ユーザーは JavaScript の状態に応じて HTML 出力を宣言的に定義できます。 Vue.js は、テンプレート構文を使用して通常の HTML を拡張します。

反応性- Vue.js は JavaScript の状態をアクティブに監視し、変更されるとすぐに DOM を更新します。

Vue3.0

Vue 2 を使用してコーディングしているエンジニアは、Vue3 に更新する必要があります。これは、読みやすく一貫性のあるコンポーネントの設計をはるかに簡単にし、アプリケーションを整理するためのより優れた方法を実現する新しい機能を備えているためです。 Vue3 は、よりユーザーフレンドリーで、短く、保守が簡単です。 Vue3 の注目すべき機能には、テレポート、フラグメント、および複数の v-model があります。

最新バージョンではフィルターも削除され、状態駆動型の CSS 変数と実験的なサスペンス機能が追加されました。また、ライフサイクルの命名の変更と単一ファイルコンポーネントの変更もあります。

Vue3 はリリースされましたか?

利用可能な Vue の最新バージョンである Vue3 は、2018 年半ばに最初に発表され、2020 年 9 月に正式にリリースされました。Vue3.0 は、2022 年 2 月 7 日にプログレッシブ JavaScript フレームワークの公式のデフォルトバージョンとして宣言されました。

Vue3 の新機能

Vue3 で期待される最もエキサイティングな変更は次のとおりです。

提供・注入

Vue 2 では、ユーザーはコード内の props を介して文字列、配列、オブジェクトなどのデータを渡すことができました。このようなデータは、親要素から子要素に簡単に渡すことができます。ただし、小道具を使用すると、親要素から深くネストされた子要素にデータを送信することがより困難になります。その結果、開発者は Vuex Store と Event Hub を使用する必要がありました。 Vue 2.2.0 には提供/注入も含まれていましたが、一般的なプログラムコードで使用することは推奨されていませんでした。

しかし、Vue3 で改善された提供/注入コンボを使用することで、データをより迅速かつきれいに渡すことができます。名前が示すように、親要素からその子コンポーネントへのデータアクセスを可能にするために提供を利用します。それらの子要素がどれだけ深くネストされているかに関係ありません。ここでは、 provide をオブジェクトまたは関数として使用できます。

テレポート

構築するアプリのロジックによっては、コンポーネントを表示したい場所とは異なる場所に表示される場合があります。たとえば、画面全体に表示されるポップアップを作成したい場合があります。これを克服するために、CSS でそのようなコンポーネントの position 属性を使用できますが、Vue3 では、開発者はテレポートも使用できます。

Teleport を使用すると、プログラマーは、ラップされている最初のコンテナーから要素を取得し、それらが使用されているページ上の既存のコンポーネントに移動できます。たとえば、ヘッダー要素を #app div からヘッダーに再配置できます。 Vue DOM の外部に存在するコードのコンポーネントに要素を移動する場合にのみ Teleport を使用できることに注意してください。

フラグメント

Vue 2 では、ファイルのテンプレートに複数のルートコンポーネントを含めることは困難です。プログラマーは、同じ解決策として、すべてのコンポーネントを親コンポーネントに含めるようになりました。プログラマーは、コンテナをラップせずに要素をレンダリングする必要がある場合があります。エンジニアは、Vue3 に追加された機能である Fragments のおかげで、ルートテンプレートファイルに多数のアイテムを含めることができるようになりました。

グローバル Vue API

Vue アプリの main.js ファイルで Vue.component または Vue.use を頻繁に見つけることができます。これらは Global APIsと呼ばれ、Vue 2 にはそのようなメソッドが多数あります。ここで、アプリのインスタンスが複数ある場合、それらはすべて Vue の上に配置されます。特定の機能を単一のアプリケーションインスタンスに制限することは困難です。

Vue3 は、createApp と呼ばれる新しいグローバル API を導入することで、この問題を解決します。このメソッドを使用すると、Vue アプリケーションの新しいインスタンスを取得できます。すべての Vue 2.x 関連の API は、個別のアプリインスタンスに転送されます。これにより、アプリケーションのすべてのインスタンスが、既に使用されている他のインスタンスを中断することなく、そのインスタンス専用の機能を持つことができます。

イベント API

Vuex ストアの使用に加えて、イベントバスの使用は、プログラマーが親子コンテキストを共有しない要素間でデータを渡すために使用した最も一般的な方法の 1 つです。ただし、 $on、$off 、$once などのコードは Vue3 ですべて削除されました。ただし、子要素は親要素にイベントを発行する必要があるため、 $emit には引き続きアクセスできます。これに対する解決策は、provide/inject を使用することです。

Vite を利用したビルドツールチェーン

Vue の作成者である Evan You によって設計された Vite は、軽量で迅速に作成できる一流の Vue SFC サポートツールチェーンです。 Vite は現在、標準の Vue3 ビルド構成の背後にあるエンジンです。モジュールバンドラー@vue-cli/serviceは、webpack の上に構築され、起動、ホットリロード、およびコンパイル時に Vue アプリケーション全体をラップします。一方、Vite はプログラムコードから ES インポート構文を取得し、HTTP リクエストを送信する前にブラウザーが各インポートを分析できるようにします。

Evan You

この変更は、主に速度の理由で行われています。サーバーは、JavaScript コンポーネントのネイティブブラウザーサポートを採用しており、はるかに高速であるため、すぐに起動します。

コンポジション API 構文

オプション API は、要素の状態とロジックを作成するために使用されました。コンポジション API は、Vue3 によって同じ代替として開始されました。インポートされたメソッドを使用してオプションを定義せずに Vue 要素を作成できるようにする API のコレクションにすぎません。

コンポジション API には、次の API が含まれています。

リアクティブAPI - 例: ref() および react()。これを使用して、リアクティブ状態、計算状態、およびウォッチャーを直接構築できます。

ライフサイクルフック- onMounted() や onUnmounted() など。ライフサイクルフックを使用して要素のライフサイクルに接続できます。

依存性注入- たとえば、provide() および inject() です。 Reactivity API で Vue の依存性注入システムを利用することは、依存性注入によって可能になります。

コンポジション API を使用する利点

Options API よりも合成 API を使用する主な利点は次のとおりです。

Vue3 では、リアクティブ状態を生成するために要素は不要になりました。
多数のリアクティブ属性を追加すると、Vue.js 要素のセットアップが肥大化する可能性があります。このため、これらのリアクティブ変数を個別の JavaScript ファイルに抽象化すると便利です。
コンポジション API の主な利点は、明確で効果的なロジックをコンポーザブルメソッドの形で再利用できることです。これは、オプション API でロジックを再利用する主な方法であるミックスインに関するすべての問題に対処します。
完全な型推論を使用して、Composition API にコードを入力できます。
コンポジション API で作成するプログラムはより効率的で、変数の名前を小さくすることができます。これにより、オーバーヘッドが削減されます。
コンポジション API を使用すると、プログラムコードをより適切に共有できます。

ピニア

Pinia は、Vue.js 用の軽量の状態管理ツールです。これにより、要素とページの間で状態を共有できます。 Vue3 の新しい反応性の概念を使用して、ユーザーフレンドリーで完全に型指定された状態管理フレームワークを作成します。これは現在、Vue3 の新しい標準状態制御ライブラリです。

Pinia は当初、Vuex の可能性を調査する役割を果たしました。長い間、Vue の状態管理システムとして Vuex が推奨されていましたが、Vue3 では、公式ドキュメントで状態を管理するシステムとして Pinia が推奨されています。現在、Vuex はメンテナンスモードになっています。引き続き機能しますが、新しい機能は追加されません。新しいアプリには Pinia の使用をお勧めします。

なぜピニア？

Pinia は非常に軽量で、最大 1KB しかありません。さらに、Vue.js 開発ツールと統合して、Vue 2 および Vue3 でのコーディングエクスペリエンスを向上させます。 Pinia はすべてのデータ型を推測するため、JavaScript での完全かつ正確なオートコンプリートも提供できます。また、Pinia はモジュラー設計で、使いやすく、拡張可能です。全体として、ピニアは軽量で、複雑ではなく、簡単に見えます。要素の処理によく似ており、Vue3 での動的プログラミングに必要なすべてのツールが含まれています。

Vue 2 は廃止されますか?

Vue 2 の最後のマイナーアップデートは、2022 年 7 月にリリースされた Vue 2.7 でした。Vue 2 は現在メンテナンスモードです。追加機能は出荷されませんが、重要なバグ修正とセキュリティパッチが 18 か月間提供されます。 2023 年末までに、Vue 2 は非推奨になります。

Vue 2 からの移行

ソフトウェアによっては、Vue 2 を使用して非常に大規模なプロジェクトに取り組んでいる場合、Vue3 に切り替える価値がない場合があります。最適化に最善を尽くしても効率の問題が解決しない場合は、Vue3 を使用してください。

アプリケーションを Vue3 に移行するかどうかは、そのサイズと複雑さによって異なります。 Vue 2 の構文とテクニックの大部分は、Vue3 と同じです。ただし、上記の変更の一部を使用する場合は、移行することをお勧めします。

AppMaster プロジェクトの Vue.js

AppMaster プラットフォームは、VueJS フレームワーク、またはフレームワークの 3 番目のバージョンを使用して、ユーザー向けのフロントエンドアプリケーションを作成します。 Vue 3 は管理者、パネル、およびクライアントポータルの作成に使用され、AppMaster スタジオのインターフェイス全体も実際に VueJS フレームワークを使用して作成されています。

マイクロフロントエンドまたはフロントエンドマイクロサービスと呼ばれる特別なアプローチを使用して、製品を迅速かつ効率的に開発できるようにします。たとえば、各データモデルエディターとビジネスプロセスエディターは、当社のプラットフォームでは完全に独立したフロントエンドアプリケーションです。これにより、開発チームの観点から非常に迅速かつ独立して開発することができ、製品の全体的な速度が向上します。これらすべての利点は、お客様が当社のアプリケーションを使用して得ることができます。

将来的には、SPA シングルページアプリケーションモードに加えて、SSR (サーバーサイドレンダリング) モードを追加する予定です。高い SEO 最適化。

no-code

ノーコードについて

コーディングの民主化に影響を与える重要な要素の 1 つは、ノーコード開発アプローチです。今日では、より多くの人々がコーディングなしで一般的にプログラミングにアクセスできます。 Web デザイン、モバイルアプリケーション開発、レスポンシブ Web 開発がより簡単になります。

AppMaster は、ソースコードの自動作成に使用できるアプリケーションの 1 つです。コードはいつでも表示および検査できます。 AppMaster では、コンピューター言語を使用してプロジェクト情報をカスタマイズするオプションがあります。必要に応じて、コードをエクスポートすることもできます。これは、AppMaster で作業しているアプリケーションを完全に制御および所有できることを保証するものです。

結論

Vue3 が Vue 2 とどのように異なるかについてのより詳細な説明とコードスニペットが必要な場合は、公式の Vue.js ドキュメントを参照してください。知っておくべき主要な変更点のほとんどについて説明しました。このフレームワークを使用したアプリケーションの構築に関心がある場合は、Vue3 の更新に注意することが重要です。