Angular React と Vue の比較

フロントエンド技術は、近年急速に発展しています。

1.開発言語技術、主にES6&7、coffeescript、typescriptなど
2.開発フレームワーク。 、Angular、React、Vue.js、Angular2 など;
3.開発ツールとフロントエンドエンジニアリングの強化、Grunt、Gulp、Webpack、npm、eslint、mocha などのテクノロジー
4.フロントエンドの開発範囲の拡大、サーバー側のnodejs、express、koa、meteor、GraphQL、モバイル側のPhoneGap、ionic、ReactNative、Weex、およびクロスプラットフォーム(three.jsなど)。コンピューター グラフィックスおよび 3D モデリングの分野では、svg、キャンバス、Bluetooth、バッテリー、ローカル ストレージなど、ブラウザーが次々と追加する新しい機能やインターフェイスを含む、d3.js など。 Service Worker、Houdini、その他の新しい API 機能、および WASM などの基盤となる最適化テクノロジー

開発フレームワークに関する限り、Angular (1&2)、React、Vue が現在主流の地位を占めており、今後もその地位を維持します。そこで、今後のテクノロジーの選択を容易にするために、これら 3 つのテクノロジーを比較します。

一データフロー

データバインディング

Angularは双方向バインディングを使用します。つまり、インターフェイスの操作をリアルタイムでデータに反映でき、データの変更をリアルタイムでインターフェイスに表示できます。時間。

実装原則:

$scope変数はダーティ値チェックを使用して実装されます。たとえば、ember.js は、セッターとゲッターの観察メカニズム $scope变量中使用脏值检查来实现。像ember.js是基于setter，getter的观测机制，

$scope.$watch函数，监视一个变量的变化。函数有三参数，”要观察什么”，”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。

使用ng-model时，你可以使用双向数据绑定。 
使用$scope.$watch（视图到模型）以及$scope.$apply（模型到视图），还有$scope.$digest

调用$scope.$watch

$scope.$watch 関数は、変数の変更を監視します。この関数には、「何を観察するか」、「変化したときに何が起こるか」、そして変数を監視するかオブジェクトを監視するかという 3 つのパラメータがあります。

ng-model を使用する場合、双方向のデータ バインディングを使用できます。 $scope.$watch を使用します (ビューモデル) および $scope.$apply (モデル表示する)、および $scope.$digest

🎜$scope.$watch を呼び出す場合のみ1 つの引数が渡されると、スコープ内でどのような変更があったとしても、この関数が呼び出されます。 ng-model では、この関数はモデルとビューが同期されているかどうかを確認するために使用され、同期されていない場合は、モデル データを新しい値で更新します。 🎜🎜🎜双方向バインディングの 3 つの重要な方法: 🎜🎜

$scope.$apply()

$scope.$digest()

$scope.$watch()

angularjs の双方向バインディングには、ダーティ チェック、ダイジェスト ループと呼ばれる 2 つの非常に重要な概念があります、ダーティ チェック (ダーティ チェック) は、バインドされたスコープ内のオブジェクトのステータスをチェックするために使用されます 、たとえば、 js 内のオブジェクトをスコープにバインドし、オブジェクトがダイジェスト ループ内に入るように、ループはこれらのオブジェクトを走査して、変更されたかどうかを確認し、対応する双方向の処理メソッドを呼び出します。 binding

Vue

は双方向バインディングもサポートしており、デフォルトは一方向バインディングであり、データは親コンポーネントから子コンポーネントに一方向で渡されます。大規模なアプリケーションでは一方向バインディングを使用して、データ フローを理解しやすくします。

ダーティ検出の長所と短所

ember.js や他のテクノロジー (優れた) のゲッター/セッター観察メカニズムとの比較:

ゲッター/セッター DOM に変更が加えられるたびに、 DOM ツリーの構造、パフォーマンス Angular はバッチ操作を 1 回の更新まで遅らせますが、パフォーマンスは比較的良好です。

Vue との比較 (劣る):

Vue.js はパフォーマンスが優れており、

ダーティ チェック

を使用しないため、最適化が非常に簡単です。 Angular では、スコープが変更されるたびにすべてのウォッチャーを再計算する必要があるため、 ウォッチャーが増えるとどんどん遅くなります 。また、一部のウォッチャーが別の更新をトリガーした場合、ダイジェスト サイクルを複数回実行する必要がある場合があります。 Angular ユーザーは、汚いチェック ループ の問題を解決するために難解なテクニックに頼ることがよくあります。多数のファイルがある場合、最適化する簡単な方法がない場合があります。 ウォッチャーの範囲。 Vue.js では、依存関係の追跡と非同期キューの更新に基づいた監視システムを使用しているため、 間に明確な依存関係がない限り、すべてのデータ変更が独立してトリガーされます 。必要な最適化は、v-for で track-by を使用することだけです。 React - 一方向データフロー

Angular と Vue の MVVM フローは、テンプレートのような構文を使用してインターフェイスのステータスとデータの間のバインディング関係を記述し、インターフェイスが変更されたときに内部変換を通じてこの構造が確立されます。時間が来ると、設定ルールに従って対応するデータを更新し、設定されたルールに従ってデータからインターフェイスのステータスを更新します。

React は関数型プログラミングと一方向のデータ フローを提唱しています

: 元のインターフェイス (またはデータ) が与えられた場合、変更を適用することで、別の状態 (インターフェイスまたはデータの更新) を派生できます。 React と Vue はどちらも Redux と連携して状態データを管理できます。

2 ビュー レンダリング

Angular1

AngularJS の動作原理は次のとおりです。HTML テンプレートはブラウザーによって DOM に解析され、DOM 構造は AngularJS コンパイラーの入力になります。 AngularJS は DOM テンプレートを走査して、対応する NG 命令を生成します。すべての命令は、ビュー (つまり、HTML の ng-model) のデータ バインディングを設定します。したがって、NG フレームワークは、DOM がロードされた後にのみ機能し始めます。

React

React のレンダリングは、メモリ内の DOM ツリーの状態を記述するデータ構造である Virtual DOM に基づいて構築されています。 状態が変化すると、React は仮想 DOM を再レンダリングし、比較と計算後に実際の DOM にパッチを当てます。

仮想 DOM は、ビューを記述する機能的なメソッドを提供します。 更新のたびにアプリケーション全体が再レンダリングされるため、ビューとデータの同期が保証されます。また、JavaScript での同型アプリケーションの可能性も広がります。

非常に大量のデータの最初の画面のレンダリング速度の点では、React には一定の利点があります。これは、Vue のレンダリング メカニズムは起動時に実行する作業が多く、 React はサーバーサイド レンダリングをサポートしているためです 。

React の 仮想 DOM も最適化する必要があります。複雑なアプリケーションでは、1. 不必要な vdom 再レンダリングを避けるために shouldComponentUpdate を手動で追加します 2. コンポーネントには可能な限り pureRenderMixin を使用し、その後 Flux 構造 + Immutable.js を使用します。実際には、それほど単純ではありません。対照的に、Vue は依存関係追跡を採用しており、デフォルトは最適化状態です: どれだけのデータが移動されるか、どれだけの更新がトリガーされるか、それ以上でもそれ以下でもありません。

React と Angular 2 はどちらもサーバーサイド レンダリングとネイティブ レンダリング機能を備えています。

Vue.jsは仮想DOMを使用しませんが、実際のDOMをテンプレートとして使用し、データは実際のノードにバインドされます。 Vue.js のアプリケーション環境は DOM を提供する必要があります。 Vue.js は React** よりもパフォーマンスが優れている場合があり、手動による最適化はほとんど必要ありません。

3 パフォーマンスと最適化

パフォーマンスの点では、これらの主流フレームワークは、最も一般的なシナリオのパフォーマンス要件を簡単に満たすことができるはずです。その違いは、最適化の可能性と、最適化が開発エクスペリエンスに与える影響にあります。 Vue の場合、トラックバイを追加する必要があります。 React では shouldComponentUpdate または完全な Immutable が必要ですが、Angular 2 では変更検出戦略を手動で指定する必要があります。全体的な傾向として、

ブラウザと携帯電話はますます高速に変化し続けるため、フレームワーク自体のレンダリング パフォーマンスは、フロントエンド パフォーマンス最適化システム全体で徐々に低下していきます。構築方法、キャッシュ、画像読み込み、ネットワークリンク、HTTP/2 など。

4 つのモジュール化とコンポーネント化

Angular1 -> Angular2

Angular1 は、モジュール間の依存関係の問題を解決するために依存関係注入を使用します。ほぼすべてのモジュールは注入コンテナ とその他の関連関数に依存します。 非同期的にロードされません。最初のロードに必要なすべての依存関係が依存関係に従ってリストされます。

非同期読み込みを実現するために Require.js などと一緒に使用できます。遅延読み込み (オンデマンド読み込み) は ocLazyLoad を利用したソリューションです が、理想的にはローカル フレームワークの方が理解しやすいでしょう。

Angular2 は ES6 モジュールを使用してモジュールを定義し、動的読み込みの必要性も考慮しています。

Vue

Vue の命令とコンポーネントはより明確に分離されています。 ディレクティブは DOM 操作 のみをカプセル化しますが、 コンポーネントは独自のビューとデータ ロジックを備えた自立した独立したユニットを表します**。 Angular1 では、この 2 つの間に多くの混乱があります。

React

React アプリケーションは React コンポーネントに基づいて構築されます。
コンポーネントには、props と state という 2 つの中心的な概念があります。
コンポーネントは、render メソッドのこれら 2 つの属性の値を通じて、このコンポーネントに対応する HTML 構造を生成します。

従来の MVC は、スクリプト タグやテンプレート ファイルなどの他の場所にテンプレートを配置し、何らかの方法で JS 内のテンプレートを参照します。それに沿って、私たちがあちこちに散らばったテンプレートの断片に何度圧倒されてきたかを考えてみましょう。テンプレート エンジン、テンプレートの保存場所、テンプレートの参照方法について混乱しています。

React はコンポーネントが王様であり、コンポーネントはテンプレートと密接に関係していると考えています。コンポーネント テンプレートとコンポーネント ロジックが分離されているため、問題が複雑になります。そこで、HTML テンプレートを JS コードに直接埋め込み、テンプレートとコンポーネントを関連付けることができる JSX 構文があります。ただし、JS は HTML を含むこの構文をサポートしていないため、ツールを使用して JSX を埋め込む必要があります。これは、コンパイルして JS コードに出力した後にのみ使用できます (クロスプラットフォーム開発の基礎として使用でき、異なるインタープリターを通じて異なるプラットフォームで実行されるコードに解釈されるため、RN と React をデスクトップの開発に使用できます)クライアント）。 5 つの文法とコード スタイル

React、Vue、Angular2 はすべて ES6 をサポートし、Angular2 は TypeScript の JavaScript スタイルを正式に採用しています。

React は JavaScript 中心ですが、Angular 2 は依然として HTML 中心です。 Angular 2 は HTML に「JS」を埋め込みます。 ReactはJSに「HTML」を埋め込みます。 Angular 2 は、HTML をより強力にしようとする Angular 1 のアプローチを踏襲しています。

React に推奨されるアプローチは JSX + インライン スタイルです。これは、HTML と CSS を JavaScript に統合することを意味します。 VueのデフォルトAPIはシンプルで使いやすいことを目指していますが、上級以降はwebpack+vue-loaderの単一ファイルコンポーネント形式(テンプレート、スクリプト、スタイルはコンポーネントとしてvueファイルに記述します)を使用することを推奨します

以上がAngular React と Vue の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。