古典的で使いやすい JavaScript フレームワーク Vue.js の紹介

この記事は、読者がそれについて予備的に理解できるように、便利な JavaScript フレームワーク Vue.js を紹介することを目的としています。

Vue とは

Vue (/vjuː/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の大きなフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、開始が簡単であるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツール チェーンやさまざまなサポート ライブラリと組み合わせると、Vue は複雑な単一ページ アプリケーション用のドライバーを提供することができます。

Vue の機能 - 計算されたプロパティ

Vue テンプレートに式を記述するのは非常に便利ですが、複雑なロジックを含めると、テンプレートが大きくなり、保守が困難になります。複雑なロジックの場合、Vue はそれを解決するための計算されたプロパティを提供します。

リーリー

これは計算されたプロパティの基本的な例であり、出力は次のとおりです。

リーリー

computed プロパティ reversedMessage がここで宣言されており、computed で提供する関数がプロパティ vm.reversedMessage の値として使用されます。また、vm.message が変更されると、それに応じて vm.reversedMessage も変更され、それに関連する他のプロパティがある場合は、それに応じて変更されます。

Vue のメソッドと計算されたプロパティ

実際、これはメソッドと非常によく似ており、このメソッドを使用して同じ効果を実現できます。

リーリー

このようにしても同じ結果が得られますが、計算されたプロパティとの違いは、メッセージが変更されない限り、計算されたプロパティは関数を実行せず、メソッドが必要とする間に前の結果を直接返すことです。機能を繰り返し実行します。キャッシュが必要ない場合はメソッドを使用します。

Vuex、Vue のコア プラグイン

まず質問に答えましょう: Vuex とは何ですか?

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中ストレージを使用してアプリケーションのすべてのコンポーネントのステータスを管理し、対応するルールを使用してステータスが予測可能な方法で変化することを保証します。 Vuex は、Vue の公式デバッグ ツール devtools 拡張機能にも統合されており、ゼロ構成のタイムトラベル デバッグ、状態スナップショットのインポートおよびエクスポートなどの高度なデバッグ機能を提供します。

Vuex 状態管理の基本的な考え方

コンポーネントの共有状態を抽出し、グローバル シングルトン モードで管理します。このモードでは、コンポーネント ツリーが巨大な「ビュー」を形成します。コンポーネントがツリー内のどこにあっても、ステータスを取得したり、動作をトリガーしたりできます

。

さらに、分離状態管理のさまざまな概念を定義し、特定のルールを強制することで、コードがより構造化され、保守が容易になります。

このアイデアは、Flux、Redux、および The Elm Architecture から借用しています。他のパターンとは異なり、Vuex は Vue.js 専用に設計された状態管理ライブラリであり、Vue.js のきめ細かいデータ応答メカニズムを活用して効率的に状態を更新します。

Vuex はいつ使用する必要がありますか?

Vuex は共有状態の管理に役立ちますが、さらに多くの概念とフレームワークも付属しています。そのためには、短期的なメリットと長期的なメリットを比較検討する必要があります。

大規模な単一ページのアプリケーションを開発する予定がない場合、Vuex の使用は面倒で冗長になる可能性があります。それは本当です - アプリケーションが十分に単純であれば、Vuex を使用しない方がよいでしょう。単純なグローバル イベント バスで十分です。ただし、中規模から大規模の単一ページ アプリケーションを構築する必要がある場合は、コンポーネントの外部で状態をより適切に管理する方法を検討することになるでしょう。その場合、Vuex が自然な選択肢になります。

Vue と他のプラグインの比較

比較のために React を例に挙げてみましょう。まず、両方には多くの類似点があります。

仮想 DOM を使用する
レスポンシブ (Reactive) ビュー コンポーネントとコンポーネント化された (Composable) ビュー コンポーネントを提供します。
コア ライブラリに重点を置き、ルーティングやグローバル状態管理などの他の機能は関連ライブラリに任せます。

実行時パフォーマンス

React アプリケーションでは、コンポーネントの状態が変化すると、コンポーネントをルートとしてコンポーネントのサブツリー全体が再レンダリングされます。

Vue アプリケーションでは、レンダリング プロセス中にコンポーネントの依存関係が自動的に追跡されるため、システムはどのコンポーネントを実際に再レンダリングする必要があるかを正確に知ることができます。すべてのコンポーネントが shouldComponentUpdate を自動的に取得しており、上記のサブツリー問題に制限がないことがわかります。

Vue のこの機能により、開発者はそのような最適化を考慮する必要がなくなり、アプリケーション自体に集中できるようになります。

Webプログラムについて

React では、すべてが JavaScript です。 JSXで表現できるのはHTMLだけではなく、JavaScriptにCSSを組み込んで処理するケースも増えてきています。このタイプのアプローチには利点もありますが、すべての開発者が満足できるわけではないトレードオフもあります。 React では、すべてのコンポーネントのレンダリング機能は JSX に依存します。 JSX は、XML 構文を使用して JavaScript を記述するためのツールです。

Vue の全体的なアイデアは、古典的な Web テクノロジーを採用し、それを拡張することです。実際、Vue はレンダリング機能も提供し、JSX もサポートしています。ただし、デフォルトの推奨事項はテンプレートです。有効な HTML はすべて有効な Vue テンプレートです。 HTML に慣れている多くの開発者にとって、JSX よりもテンプレートの方が読み書きが自然です。もちろん主観的な好みの要素はありますが、この違いが開発効率の向上につながるのであれば、客観的な価値があります。

スケール

Vue と React はどちらも、大規模なアプリケーションを処理するための強力なルーティングを提供します。 React コミュニティは状態管理 (Flux、Redux など) において非常に革新的であり、これらの状態管理パターンや Redux 自体も簡単に Vue アプリケーションに統合できます。実際、Vue はこのモデル (Vuex) をさらに一歩進め、Vue の状態管理ソリューション Vuex をより深く統合し、より良い開発エクスペリエンスを提供できると信じています。

この 2 つのもう 1 つの重要な違いは、Vue のルーティング ライブラリと状態管理ライブラリが公式に保守およびサポートされ、コア ライブラリと同期して更新されることです。 React は、これらの問題をコミュニティに任せることを選択し、より分散化されたエコシステムを作成します。しかし、相対的には、React のエコシステムは Vue よりも繁栄しています。

React と Vue には他にも違いがありますが、ここでは詳しく説明しません。もちろん、どちらを選択するかはユーザーによって異なります。現時点で行っていることは、便宜のためのいくつかの提案にすぎません。ユーザーは Vue と他のプラグインとの違いをよりよく理解できるようになります。

以上が古典的で使いやすい JavaScript フレームワーク Vue.js の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。