ホームページ  >  記事  >  ウェブフロントエンド  >  角度によるダーティ値の検出と vue データのハイジャックの違いは何ですか?

角度によるダーティ値の検出と vue データのハイジャックの違いは何ですか?

青灯夜游
青灯夜游オリジナル
2020-12-16 16:27:512733ブラウズ

相違点: 1. Angular ダーティ値検出は原則としてローエンド IE をサポートし、理論上はより優れた互換性を備えています。vue データ ハイジャックには ES5 をサポートするブラウザが必要です。 2. Angular ダーティ値検出は大量のデータを含む更新に適しており、Vue データ ハイジャックは少量のデータを含む更新に適しています。

角度によるダーティ値の検出と vue データのハイジャックの違いは何ですか?

関連する推奨事項: 「angular チュートリアル 」、「vue.js チュートリアル

データ バインディングを実装するには、いくつかの方法があります。

  • パブリッシャー-サブスクライバー パターン (backbone.js)

  • ダーティ値チェック (angular.js)

  • データハイジャック (vue.js)

Angular でのダーティ値の検出

angular.js はダーティ値検出を使用してデータが変更されたかどうかを比較し、ビューを更新するかどうかを決定します。最も簡単な方法は、setInterval() を通じて定期的にポーリングしてデータ変更を検出することです。もちろん Google はそれほど遅くはありませんAngular は、指定されたイベントがトリガーされた場合にのみダーティ値検出を開始します。これは大まかに次のとおりです:

  • DOM イベント (ユーザーによるテキストの入力、ボタンのクリックなど)。 (ng-click)

  • XHR 応答イベント ($http)

  • ブラウザ位置変更イベント ($location)

  • #タイマーイベント(間隔)

  • #apply()の実行
  • #メリットとデメリット

原則として、ローエンド IE をサポートし (初期の NG は IE8 をサポートしていることに注意してください)、理論上はより優れた互換性を備えています。大量のデータによる更新。CPU レベルでの時間計算量は O(VModel) です。更新された少量の差分は計算的に無駄です。
  • ホイールとアイデアの最適化を検討できます。 Immutable.js の、React Redux Immer に似ています
  • setState と同様に手動で呼び出す必要があります。Zone.js を導入した後はより便利です。大規模な詳細な更新にはこの問題があります
  • vue でのデータ ハイジャック

データ ハイジャックは主に、操作を監視する ES5 によって提供される Object.defineProperty メソッドを通じて実装されます。これにより、データ同期が自動的にトリガーされます。さらに、同期は異なるデータに対してトリガーされるため、すべてのデータに対してテストを実行するのではなく、変更をバインドされたビューに正確に送信できます。

データとビューのバインドと同期は、最終的にはデータの読み取りと書き込みのプロセス、つまり、Object.defineProperty() で定義されたデータ セットと取得関数に反映されます。 メリットとデメリット

JavaScript ネイティブ機能を使用しますが、ES5 をサポートするブラウザも必要です。結局のところ、フロントエンドは将来のプログラミングを指向しているため、 Vue 3 は、ES6 のプロキシ実装にアップグレードする予定です

少量のデータ ボリューム (きめ細かい) の更新に適しており、CPU レベルでの時間計算量は O(変更) です。より多くのメモリ使用量 (時間のためのスペース) のコスト
  • 依存関係収集の粒度を下げると (特定の属性の変更を考慮することから、特定のオブジェクトの変更のみを考慮するように)、最適化できます。メモリの問題
  • 実際、Vue 2 では Virtual DOM が導入され、サブコンポーネント レベルでの更新に diff が使用されます
  • 2 つの違い

angular ダーティ値検出原理はローエンド IE をサポートし (初期の NG は IE8 をサポートしていることを思い出してください)、理論的にはより良い互換性を持っていますが、vue データ ハイジャックにはES5をサポートするブラウザ。

angular ダーティ値検出は大量のデータを含む更新に適していますが、vue データ ハイジャックは少量のデータ (きめ細かい) を含む更新に適しています。 関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)


vue チュートリアル推奨: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、

プログラミング入門

をご覧ください。 !

以上が角度によるダーティ値の検出と vue データのハイジャックの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。