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. テストが簡単

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

欠点

1. 生態環境は完璧ではない

Vue は 5 年間開発されてきましたが、そのエコシステムは React や Angular ほど標準化されていません。 Vue 開発に関するディスカッション コミュニティは比較的小規模です。

2. 海外市場が小さい

Vueは中国のYou Da Shen氏によって開発され、主にAlibabaやEle.meなど国内大手企業で主流のフレームワークとして採用されていますが、海外企業ではReactやAngularが主流となっています。

上記は、Vue の簡単な入門知識について詳しく説明したものです。Vue の入門に関する詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。