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 を使用してさまざまな画面に適応する例

推薦する

LinkedIn がウェブサイト閲覧を簡素化するためにリニューアル

ビジネス ソーシャル ネットワーキング サイト LinkedIn は最近、ナビゲーション バーとユー...

MySQL 結合テーブルクエリの基本操作 左結合のよくある落とし穴

概要中小規模のプロジェクトでは、特にレポートを作成するときに、結合テーブル クエリが非常に一般的な操...

Docker 起動時の ES メモリ オーバーフローの解決方法

jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...

Vue.set() と this.$set() の使い方と違い

開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...

Mysqlのインポートとエクスポート時に発生する問題の解決

背景すべての業務を Docker の運用管理に移行してから、一連の落とし穴に遭遇しましたが、今回は ...

VMware Tools を最初からインストールするための詳細な手順 (グラフィック チュートリアル)

VMware Tools は VMware 仮想マシンに付属するツールで、VirtualBox (...

入力選択スタイルを変更する CSS 疑似クラスのサンプルコード

注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...

JS のディープコピーとシャローコピーの詳細

目次1. 浅いコピーとはどういう意味ですか? 2. ディープコピーとはどういう意味ですか? 3. デ...

Linux ファイル管理コマンド例の分析 [表示、閲覧、統計など]

この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...

nginx で gzip 圧縮を実装してウェブサイトの速度を向上させる方法

目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...

シンプルなカルーセル効果を実現するJavaScript

カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...

Element PlusはAffixを実装します

目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...

Linux でファイルの作成時間を取得する方法と実践的なチュートリアル

背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...

CSS 属性セレクタを使用して HTML DNA を接合する方法

CSS 属性セレクターは素晴らしいです。大量のクラス名を追加することを回避し、コード内の問題を指摘す...

Dockerを使用してプライベートGitLabを構築する2つの方法

最初の方法: docker インストール1. オープンソース版のイメージを取得する2. 対応するデー...