VUE 応答性原理の詳細な説明

VUE 応答性原理の詳細な説明

1. 応答原理の基盤

応答性の基本原理はObject.defineProperty(obj, prop, descriptor)に基づいています。descriptor では get descriptorと set メソッドを定義できます。get メソッドはプロパティ値を取得するときにトリガーでき (依存関係を収集できます)、set メソッドはプロパティ値を設定するときにトリガーできます (依存関係を更新できます)。

拡張: 上記は vue2.0 の基本的な応答性原則です。vue3.0 の基本原則は Proxy で、属性の get および set メソッドの監視、属性の追加と削除の監視などを行うことができます。Object.defineProperty よりも強力ですが、IE11 と互換性がありません。

2. コアオブジェクト: Dep と Watcher

Dep : データ内で vue によって宣言された各プロパティは Dep のインスタンス オブジェクトを生成し、Dep.subs はプロパティが変更されたときに更新する必要がある Watcher を格納します。

Watcher : Watcher インスタンス オブジェクトが生成される状況は 3 つあります。

1. computed で定義された計算プロパティ。

2. 時計に書き込まれた監視機能。

3. コンポーネントレンダリングウォッチャー

3. 依存関係を収集して更新する

3.1 依存関係の収集

Watcher インスタンス オブジェクト w を、それが依存する属性の Dep に配布します。プロセスは次のとおりです。

1. Dep.target を現在の Watcher のインスタンス オブジェクト w に設定します。

2.w は定義された関数 (つまり、computed/watch で記述された関数) を実行します。

3. 関数実行プロセス中に data で定義された属性が使用されると、属性の get メソッドがトリガーされます。 get メソッドでは、Dep インスタンス オブジェクト dep が Dep.target に格納されている w を dep.subs 配列に格納して、依存関係のコレクションを完了します。

注: Dep.targetは現在のウォッチャーのインスタンスオブジェクトです。

3.2 依存関係の更新

宣言したプロパティを変更すると、プロパティの set メソッドがトリガーされます。set メソッドは、dep.subs 配列に収集された Watcher インスタンス オブジェクトを更新します。つまり、computed および watch で定義した関数をトリガーします。

4. ソースコードのデバッグ

4.1 テストページコード

<テンプレート>
  <div>
    <div>a:<input v-model="a" /> </div>
    <div>c:{{ c }}</div>
    <div>b:<input v-model="b" /> </div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ: () => {
    戻る {
      a: ''、
      b: ''
    }
  },
  計算: {
    c() {
      'source from ' + this.a を返します。
    }
  },
  時計:
    b() {
      console.log('bが変更されました');
    }
  }
};
</スクリプト>

上記のコードは、Vue が初期化された後に次のオブジェクトを生成します。

1. オブジェクトの説明

属性 a と b に対応する Dep インスタンス オブジェクト (a と b が変更されたときに更新する必要があるウォッチャーを収集): depAdepB

ページ レンダリング関数は、対応する Watcher インスタンス オブジェクトupdateWatcher生成します。

計算プロパティ c は、対応する Watcher インスタンス オブジェクトwatcherCを生成します。

ウォッチ リスナー属性 b は、対応する Watcher インスタンス オブジェクトwatcherBを生成します。

2. DepとWatcherの関係

a と b が変更されるとページを再レンダリングする必要があるため、 depAdepBsubsupdateWatcherが存在します。

計算されたプロパティ c はプロパティ a の変更に依存するため、 watcherC depA のサブに存在します。

b の変更は、watch の定義内の b の listen 関数をトリガーするため、 watcherB depB のサブに存在します。

3. 最終的な関係の結果

最後のプロパティ a は依存関係を収集しますdepA.subs = [ updateWatcher, watcherC] ;

最終プロパティ b は依存関係を収集しますdepB.subs = [ updateWatcher, watcherB] ;

4.2 ソースコードのデバッグ

ソースファイルを見つけます: node_modules\vue\dist\vue.runtime.esm.js ;

主に以下の機能が含まれます。

1. コレクション依存のエントリ関数: initState (ページが初期化されるときに実行されます)。

初期化の順序は、データ --> 計算済み --> ウォッチです。これは、計算済みがデータに依存し、ウォッチがデータとウォッチに依存するため、依存するものを最初に初期化する必要があるためです。

2. 計算と監視を初期化するときに、ウォッチャーインスタンス化オブジェクトを生成する

まずWatcher.get関数を実行し、Dep.targetを現在のWatcherインスタンス化オブジェクトに設定します。

依存関係の収集をトリガーする

計算プロパティで関数を実行します。データ内のプロパティにアクセスすると、データ プロパティの get メソッドがトリガーされ、依存関係の収集がトリガーされます。

このプロパティが変更されると、set メソッドがトリガーされ、dep.subs 内のウォッチャー オブジェクトの更新がトリガーされます。

最後に、Watcher の更新関数がトリガーされ、更新されるウォッチャーがキューに入れられます。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueにおけるv-modelと応答性の実装原理の分析
  • Vue の応答性原則の詳細な例
  • Vue3.0 レスポンシブ機能の原理の詳細
  • Vueのレスポンシブシステムの原理の詳細な説明
  • Vue3のレスポンシブ原則の詳細な説明
  • VUE レスポンシブ原則の実装の詳細な説明

<<:  HTML のスクロールバーについて/スクロールバーの削除

>>:  @media レスポンシブ CSS を使用してさまざまな画面に適応する例

推薦する

MySQL REVOKE でユーザー権限を削除する

MySQL では、REVOKE ステートメントを使用してユーザーの特定の権限を削除できます (ユーザ...

Dockerボリューム権限管理の詳細な説明

ボリュームデータボリュームは Docker の重要な概念です。データ ボリュームは、1 つ以上のコン...

ファイルの種類を検出するJavaScriptメソッド

目次1. 画像のバイナリデータを表示する方法2. 絵の種類の見分け方3. 画像の種類を検出する方法3...

MySQL で binlog を使用する際のフォーマットの選択方法

目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...

Centos7 に mysql と mysqlclient をインストールする際に遭遇する落とし穴の概要

1. MySQL Yumリポジトリを追加するMySQL公式サイト>ダウンロード>MySQ...

MySql 5.6.35 winx64 インストール詳細チュートリアル

注: データベースのバージョンの問題により、プロジェクトの起動時にエラーは発生しませんでしたが、デー...

Apache Web サーバーを使用して 2 つ以上のサイトを構成する方法

人気があり強力な Apache Web サーバーで 2 つ以上のサイトをホストする方法。前回の記事で...

Linux で CPU 使用率が高くなる原因をトラブルシューティングするプロセスの詳細な説明

目次序文始めるステップトラブルシューティング序文CPU 使用率が高くなるのは、オンラインでよくある問...

JavaScript における clientWidth、offsetWidth、scrollWidth の違い

1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element....

Linux で大容量メモリ ページを持つ Oracle データベースを最適化する方法

序文PC サーバーは今日まで発展を続け、パフォーマンスにおいて大きな進歩を遂げてきました。 64ビッ...

Robots.txtの詳細な紹介

Robots.txt はプレーンテキスト ファイルであり、Web サイト管理者は、ロボットによるアク...

Webフロントエンドの一般的な操作(JS/HTML/CSSなどの知識を含む)

ul liの前のアイコン1をキャンセルしますクリア値1値を1に設定ラベル中央値1をクリアラベルの中央...

MySQLとNavicatプレミアムのインストールと設定の詳細な手順

前提条件: Mac、zsh がインストールされ、bash のときに mysql がダウンロードされ、...

MySQL8インストーラーバージョングラフィックチュートリアル

インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...