Vueを使い始める際に習得する必要がある知識について簡単に説明します

最も人気のあるフロントエンドフレームワークの 1 つとして、Vue は多くのフロントエンド開発エンジニアにとって第一の選択肢です。最近、フロントエンドのポジションでいくつかの製品を実装するために Vue も使用しましたので、今日は Vue とは何か、そして Vue に関する私の見解を共有したいと思います。

定義

Vue は、ユーザーインターフェイスを構築するためのプログレッシブJavaScript フレームワークです。

従来の JS および JQuery フレームワークとは異なり、Vue のプログレッシブフレームワークでは、開発者はシンプルなコンポーネントから始めて、徐々に複雑なフロントエンドプラットフォームを構築できます。
Vue プログレッシブフレームワークを形成するコア概念は、コンポーネント化、 MVVM 、応答性、ライフサイクルです。これらについては、以下で詳しく説明します。

2. Vue を使用する理由

1. コンポーネント化

Vue は、ページを構成する HTML、CSS、JS をコンポーネントに結合し、他のコンポーネントやページに導入して再利用できるようにします。通常、各 .Vue ファイルはコンポーネントとしてエクスポートされます。コンポーネントは、基本コンポーネント (ボタンなど) またはページ (ログインページなど) になります。コンポーネント化により、大規模で複雑なフロントエンドプロジェクトを個々のコンポーネントに効果的に分割でき、再利用性により開発効率も大幅に向上します。

2. MVVMデータの双方向バインディング

MVVM モード (完全な名前: Model-View-ViewModel) は、Vue の双方向データバインディングを実装します。 MVVM では、View はビューレイヤー、ViewModel はビジネスロジックレイヤー、Model はデータレイヤーです。

双方向データバインディングとは何ですか?ユーザーがビューを変更すると (フォームへの入力など)、その変更は ViewModel に自動的に同期され、対応するロジックが処理されて、モデルデータベースへの変更が更新されます。逆に、サーバー側のデータが変更された場合（株価の変動など）、その変更は自動的に ViewModel に同期されて対応するロジックが処理され、変更は View に同期されてユーザーに表示されます。

Vue を使用する前は、HTML と JS 間のやり取りを完了するために、動的な読み込みを実現するために多くの DOM 操作を使用する必要がありました。 MVVM の双方向データバインディングにより、DOM 操作が削減され、ビューとデータ間の相互作用がより効率的に実装されます。同時に、MVVM はインターフェイス、インタラクション、およびデータレイヤーを分離し、設計者がインターフェイスを設計しやすくし、バックエンド開発者がデータインターフェイスを提供しやすくし、フロントエンド開発者がビジネスインタラクションロジックの実装に集中できるようにします。

3. レスポンシブな仮想DOM

DOM の場合、HTML 要素 (div など) がデータの変更に応答する必要がある場合、ページ全体が更新され、効率が低下します。仮想 DOMの場合、ブラウザはHTML ファイルを JS ファイルに変換し、追加の使用 (仮想) をコピーします。変更があった場合、仮想 DOM はコピーされた JS と元の JS を比較し、変更された部分のみを再読み込みして、実際の DOM にローカルに変更します。

Vue では、データ属性にバインドされた各コンポーネントには、データ属性の変更を検出するWatcherがあります。変更が検出されると、コンポーネントは再レンダリングされ、レスポンシブになります。

4. ライフサイクル

最後に、各 Vue コンポーネントにはライフサイクルがあり、プロセスはcreate -> mount -> update -> destroyです。開発者はフック関数(mounted など) を使用して、コンポーネントのライフサイクルのさまざまなタイミングで操作を実行できます。以下は、Vue ライフサイクルの完全な図です。

3. Vueのメリットとデメリット

Vue のいくつかの中心となる概念について説明した後、フロントエンド開発に Vue フレームワークを使用する利点と欠点をまとめてみましょう。

アドバンテージ

1. 軽量

軽量のフロントエンドフレームワークである Vue のサイズはわずか 18 ～ 21 KB です。プロジェクトの構築は簡単で、数行のコマンドのみが必要です。 Vue が主に使用している言語は JS であるため、開発者は他のフレームワーク (React や Angular など) から統合機能の高い Vue にプロジェクトを柔軟に移行できます。 Vue が提供するルーターを使用すると、マルチインターフェースアプリケーションを簡単に構築できます。

2. 高いパフォーマンス

仮想 DOM と応答性により、不要なグローバル再レンダリングが回避され、ユーザーエクスペリエンスが向上し、ユーザー操作がスムーズになります。

3. 使いやすい

オブジェクト指向プログラミングと同様に、コンポーネント化は人間の思考に沿ったものになります。たとえば、Web ページを設計する場合、通常はインターフェイスを特定の機能に使用される特定のスタイルモジュールの部分に分割します。 Vue のコンポーネント化により、フロントエンド開発が理解しやすくなり、MVVM によりインタラクションがより便利に実現できるため、初心者にとって非常に使いやすいです。

4. プラグイン

Vue フレームワークの人気により、現在、Vue をベースにしたnpm 拡張パッケージや開発ツール(Vuex など) が数多く存在します。 Vue は、すべての外部プラグインのグローバルな使用を 1 つのファイルで管理できます。

5. テストが簡単

コンポーネント化により、開発者は単一のコンポーネントをテストできるようになり、ページ全体でエラーが発生する場所を見つけられないことはほとんどありません。