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 が初期化された後に次のオブジェクトを生成します。