開発における vuejs の利点は何ですか?-Vue.js-php.cn

開発における vuejs の利点は次のとおりです: 1. サイズが小さい; 2. 操作効率が高い; 3. 開発者は DOM オブジェクトを操作する必要がなくなり、ビジネスロジックにより多くのエネルギーを注ぐことができます; 4. 豊かなエコロジー; 5. 学習コストが低い。

開発における vuejs の利点は何ですか?

この記事の動作環境: Windows7 システム、vue2.5.17 バージョン、DELL G3 コンピューター。

開発における vuejs の利点は何ですか?

#vue フレームワーク (Vue を使用する理由、メリット)

1. Vue.js とは

Vue は、ユーザーインターフェイスを構築するための進歩的な JavaScript フレームワークです。

2. Vue.js の利点

高い操作効率: 仮想 DOM に基づくJavaScript を通じて事前にさまざまな計算を実行し、最終的な DOM 操作を計算および最適化できる技術です。この DOM 操作は前処理操作であり、実際に DOM を操作するわけではないため、仮想 DOM と呼ばれます。
豊富なエコロジーと低い学習コスト: 市場には成熟した安定した製品が多数あります UI フレームワークvue.js に基づくコンポーネントを使用すると、迅速な開発を実現できます。初心者に優しく、簡単に始められ、多くの学習教材が用意されています。

3. Vue を使用する理由。 js

フロントエンドテクノロジの継続的な開発により、フロントエンド開発はますます多くのビジネスに対応できるようになり、Web ページはますます強力かつ動的になり、これらの進歩は JavaScript と切り離すことができません。現在の開発では、多くのサーバー側コードが実行のためにブラウザーに組み込まれており、さまざまな HTML および CSS ファイルに接続される数千行の JavaScript コードが生成されますが、正式な組織形態が不足しています。これは、ますます多くのフロントエンド開発者が JavaScript フレームワークを使用する理由でもあり、現在、より人気のあるフロントエンドフレームワークには、Angular、Reac、Vue などが含まれます。

Vue は、フレンドリーで多用途かつ高性能な JavaScript フレームワークであり、

より保守しやすくテストしやすいコードベースを作成するのに役立ちます。 Vue は先進的な JavaScript フレームワークです。 つまり、既製のサーバーアプリケーションがある場合は、Vue をアプリケーションの一部として埋め込んで、より豊かなインタラクティブなエクスペリエンスを実現できます。または、フロントエンドにさらに多くのビジネスロジックを実装したい場合は、Vue のコアライブラリとそのエコシステムがさまざまなニーズを満たすこともできます。他のフレームワークと同様、Vue では Web ページを再利用可能なコンポーネントに分割できます。各コンポーネントには、Web ページ内の対応する場所をレンダリングするための独自の HTML、CSS、および JavaScript が含まれています。大規模なアプリケーションを構築する場合は、物事を別々のコンポーネントとファイルに分割する必要がある場合がありますが、Vue のコマンドラインツールを使用すると、実際のプロジェクトをすばやく初期化することが非常に簡単になります。

vue init webpack my-project

ログイン後にコピー

独自の HTML、JavaScript、およびスコープ指定された CSS または SCSS を含む、Vue の単一ファイルコンポーネントを使用することもできます。

4、MVC、MVP、MVVM デザインパターン

MVC (Model-View-Controller) は、最も一般的なソフトウェアアーキテクチャの 1 つであり、ソフトウェア開発の分野で広く使用されています。MVC 自体は比較的理解しやすいですが、そこから派生するMVPやMVVMを明確に説明するのは簡単ではありません。

#4.1、MVC

MVC は、ソフトウェアが 3 つの部分に分割できることを意味します:

表示: ユーザーインターフェイス

##モデル: データストレージ
ビューはコントローラーに指示を送信します

Controller がビジネスロジックを完了した後、Model が状態を変更する必要があります

Model は View に新しいデータを送信し、ユーザーはフィードバックを受け取ります

#MVC モードを実行するには 2 つの方法があります:

(1) View を通じて指示を受け取り、それらを View に渡します。コントローラ

(2) コントローラを通じて直接指示を受け入れる

実際のプロジェクトでは、より柔軟なアプローチがよく使用されます。

(1) ユーザーは命令 (DOM イベント) をビューに送信でき、その後ビューはモデルに状態を変更するよう直接リクエストできます;

(2) ユーザーは命令を送信することもできますコントローラーに直接送信し (URL を変更すると hashChange イベントがトリガーされます)、コントローラーはそれをビューに送信します。

(3) コントローラーは非常に薄く、ルーティングの役割のみを果たしますが、ビューは非常に機能的です。厚く、ビジネスロジックは View にデプロイされるため、一部のフレームワークはコントローラーを直接キャンセルし、ルーターのみを残します。

図に示すように:

4.2、MVP

MVP (Model-View-Presenter) は、古典的な MVC から進化しました。 Mode はデータを提供し、View は表示を担当し、Presenter は論理処理を担当します。

MVP と MVC には大きな違いがあります:

MVP では、ビューとモデルは接続されておらず、それらの間の通信はプレゼンターを通じて実行され、すべてのインタラクションはプレゼンター (つまり、MVC のコントローラー) 内で発生します。MVC では、ビューはコントローラー経由ではなくモデルから直接データを読み取ります。
MVP のさまざまな部分間の通信は双方向ですが、MVC のさまざまな部分間の通信は一方向です。
MVP では、View は非常に薄く、ビジネスロジックをまったく展開しません。これは「パッシブビュー」(Passive View) と呼ばれ、主導権を持たないのに対し、Presenter は非常に厚く、すべてのビジネスロジックを展開します。そこにロジックが展開されます。

図に示すように:

##4.3、MVVM

MVVM (Model-View-ViewModel) は本質的に MVC の改良版であり、MVC の View をより詳細に分業したものです。 ViewModel はビュー UI とビジネスロジックを分離し、コンテンツを表示する必要があるため、モデルのデータを取り出し、ビューで設計されたビジネスロジックの処理を支援します。

MVVM モードは MVP モードに似ていますが、唯一の違いは、双方向のデータバインディング (データバインディング)、つまりビューでの変更を使用することです。 ViewModel に自動的に反映され、その逆も同様です。

5. データドリブン (双方向データバインディング) の原則

データドリブンとは

データドリブンが最大のものですVue.jsの機能。 Vue では、いわゆるデータ駆動型とは、データが変更されるとユーザーインターフェイスもそれに応じて変更され、開発者が手動で DOM を変更する必要がないことを意味します。

たとえば、ボタンをクリックすると、要素のテキストで「はい/いいえ」の切り替え操作を実行する必要があります。従来の jQuery では、通常、ページ変更のプロセスは次のようになります: イベントをボタンにバインドするを取得し、コピーは要素の DOM オブジェクトに対応し、最後に DOM オブジェクトのテキスト値がスイッチに従って変更されます。

Vue はデータ駆動型を実装します

Vue は、

Object を介したパブリッシャー/サブスクライバーモデルと組み合わせた、主にデータハイジャックを通じて双方向のデータバインディングを実装します。 defineProperty () を使用して、各属性の setter と getter をハイジャックし、データが変更されたときにサブスクライバーにメッセージをパブリッシュし、対応するリスニングコールバックをトリガーします。

通常の JavaScript オブジェクトがデータオプションとして Vue インスタンスに渡されると、Vue はそのプロパティを反復処理し、Object.defineProperty を使用してそれらをゲッター/セッターに変換します。ゲッター/セッターはユーザーには表示されませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスされ変更されたときに変更を通知することができます。

Vue の双方向データバインディングは、Observer、Compile、Watcher を統合するデータバインディングの入り口として MVVM を使用します。Observer を使用して独自のモデルのデータ変更を監視し、Compile を使用してテンプレート命令を解析およびコンパイルします。 (vue は {{}} テンプレート構文の解析に使用されます)、最後に Watcher を使用してオブザーバーとコンパイルの間の通信ブリッジを構築し、データ変更を実現します -> 更新を表示します; インタラクティブな変更 (入力) を表示します -> データモデルの双方向バインディング効果が変わります。

ゲッターとセッターの理解

vue インスタンスの下のデータオブジェクトの属性を出力する場合、その各属性には 2 つの対応する get メソッドと set メソッドがあります。名前が示すように、get は値メソッド、set は代入メソッドです。通常、値の取得と代入はobj.propを使用して行われますが、これには問題があります。

get と set は関数として理解できます。オブジェクトのプロパティを呼び出すときは、get.property(){...} と入力し、まずオブジェクトにこのプロパティがあるかどうかを判断します。ない場合は、次に、name 属性を追加して値を割り当てます。name 属性がある場合は、name 属性を返します。 get は値を受け取る関数と考えることができ、関数の戻り値は関数が取得した値です。

インスタンスに値を割り当てるときは、set.property(val){...} と入力します。仮パラメータ val は、プロパティに割り当てられる値です。この関数では、次のような多くの処理が行われます。双方向バインディングなどこの値は毎回 set を通過する必要があるため、他の方法で値を変更することはできません。 ES5 では、オブジェクトプロトタイプには

_defineGetter_ と _defineSetter_ という 2 つのプロパティがあり、特に get と set をオブジェクトにバインドするために使用されます。

6. 仮想 DOM

6.1 仮想 DOM とは

仮想 DOM の概念は、Vue.js バージョン 2.0 で導入されました。実際には、JavaScript オブジェクト (VNode ノード) をベースとして DOM 構造をシミュレートするツリー構造であり、このツリー構造には DOM 構造全体に関する情報が含まれています。簡単に言うと、Virtual DOM は単純な JS オブジェクトとして理解でき、少なくとも 3 つの属性 (タグ名 (tag)、属性 (attrs)、子要素オブジェクト (children)) が含まれています。フレームワークが異なれば、これら 3 つのプロパティの名前も異なります。

6.2 仮想 DOM の役割

仮想 DOM の最終的な目標は、仮想ノードをビューにレンダリングすることです。ただし、仮想ノードを直接使用して古いノードを上書きすると、不要な DOM 操作が多数発生します。たとえば、ul タグの下に多くの li タグがあり、li タグのうちの 1 つだけが変更されている場合、古い ul を新しい ul に置き換えると、不要なタグが原因でパフォーマンスが無駄になります。 DOM 操作。

不必要な DOM 操作を回避するために、仮想ノードをビューにマッピングするプロセス中に、仮想 DOM は仮想ノードを、ビューの最後のレンダリングで使用された古い仮想ノードと比較して、変更する必要のない他の DOM 要素の操作を避けるために DOM 操作を実行するため。

実際、仮想 DOM は Vue.js で主に 2 つのことを行います。

実際の DOM ノードに対応する仮想ノード VNode を提供します。
ノード VNode を比較します。古い仮想ノード oldVNode を更新し、ビューを更新します。

6.3 仮想 DOM を使用する理由

には、クロスプラットフォームの利点があります。 JavaScript オブジェクトに基づいており、実際のプラットフォーム環境に依存しないため、ブラウザプラットフォーム、Weex、Node などのクロスプラットフォーム機能を備えています。
DOM の動作は遅いが、JS の動作効率が高い DOM の比較演算を JS 層に置くことで効率を向上させることができます。 DOM 操作の実行速度は JavaScript 操作の実行速度よりもはるかに遅いため、多くの DOM 操作が JavaScript に移行され、パッチ適用アルゴリズムを使用して本当に更新する必要があるノードが計算され、DOM 操作が最小限に抑えられます。パフォーマンスが大幅に向上します。仮想 DOM は基本的に JS と DOM の間にキャッシュを作成し、JS は仮想 DOM を操作するだけで、最終的に変更を実際の DOM に書き込みます。
レンダリングパフォーマンスの向上: Virtual DOM の利点は、単一の操作ではなく、大規模かつ頻繁なデータ更新時に合理的かつ効率的にビューを更新できることです。

以上が開発における vuejs の利点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。