Vue.js の全体的なアーキテクチャは次の部分に分類できます。
記事ディレクトリ
1. データドリブン
Vue の中核となる機能はデータ駆動型です。Vue はデータの初期化時に監視モニターを提供し、データが変更されると、DOM の再レンダリングをトリガーするために順番に変更されます。Vue はデータによって駆動されるため、DOM 操作を考慮することなくビジネス ロジックに集中できます。
2. コンポーネント化
Vue のもう 1 つの中心的な機能はコンポーネント化です。コンポーネント化によりコードの再利用性が向上すると同時に、コンポーネント間の関係を簡単に管理できるようになります。Vue のコンポーネントはツリー構造を使用しており、各コンポーネントは独自の状態と動作を持ち、必要に応じて相互に通信できます。
3. 応答性の高いシステム
Vue のリアクティブ システムは基本的にデータ駆動型です。Vue はすべてのデータ変更を監視するため、データが変更されるとすぐにビューを更新できます。Vue は ES6 の Proxy と Reflect を使用して応答性の高いシステムを実装します。
4. 仮想DOM
Vue の仮想 DOM は、ページのレンダリング効率を向上させるために作成されます。仮想 DOM は、DOM ツリーの構造を含む軽量の JavaScript オブジェクトですが、実際にはブラウザーにレンダリングされません。Vue は DOM を更新する必要がある場合、新旧の仮想 DOM の差分を比較して更新が必要な部分のみを更新するため、ページ レンダリングの効率が向上します。
5. プラグインシステム
Vue は、開発者がさまざまなプロジェクトで簡単に共有できるように、一般的に使用されるいくつかのコンポーネントと命令をカプセル化できるプラグイン システムを提供します。Vue のプラグイン システムは、グローバル API と MIXIN に基づいて実装されています。
6. 単一ファイルのコンポーネント
Vue の単一ファイル コンポーネントは最新の ES6 標準を使用し、モジュラー アプローチを採用しています。各単一ファイル コンポーネントは、テンプレート、スクリプト、スタイルの 3 つの部分で構成されており、これらはすべて ES6 のモジュール インポートおよびエクスポート構文を使用してインポートおよびエクスポートできます。
7. テンプレートのコンパイル
Vue のテンプレート コンパイルでは、HTML テンプレートを Vue のレンダリング関数にコンパイルできます。Vue のテンプレート コンパイルは、基本的な命令、式、イベント バインディングをサポートしているため、コードを簡素化し、開発効率を向上させることができます。
要約する
Vue によって構築された全体的なアーキテクチャは、データ駆動型、コンポーネント化された応答性の高いシステム、仮想 DOM、プラグイン システム、単一ファイル コンポーネント、テンプレート コンパイルなど、非常に強力です。これらの機能により、開発者は DOM 操作やブラウザの互換性の問題をあまり考慮する必要がなく、ビジネス ロジックの開発に集中できます。