Vueで配列の変更を監視する方法

Vueで配列の変更を監視する方法

序文

以前、Vue におけるレスポンシブ データの原則について学びました (そして、Vue のレスポンシブ原則についてメモを取りました)。実際には、Object.defineProperty を通じてゲッターとセッターを制御し、オブザーバー モードを使用するレスポンシブ デザインです。次に、配列には一連の操作メソッドがありますが、配列のゲッター メソッドとセッター メソッドはトリガーされません。では、配列のレスポンシブ デザインは Vue でどのように実装されるのでしょうか? 一緒に学んでみましょう。

ソースコード

https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js

学習の第一歩はどこから始めればよいでしょうか?

うーん...
まず、Vue でのデータ応答性の原則を明確にして、Vue で配列の変更を検出する方法を理解しやすくする必要があると思います。そのため、オンラインで記事を見つけて、ソースコードとともに読むことができます。理解できると思います。以前読んだブログと、それを読んだ後に書いた学習記録をオススメします(笑)。

Vue レスポンシブ原則

Vue における双方向バインディングの原理と実装

さて、まずはこれを見てみましょう。ハハハ!

写真から始めましょう

下の図を見て、まずは Vue での実装の考え方を理解しましょう。そうすれば、後でソースコードの実装を見たときに、明確で理解しやすいものになります。

この絵を見て考えてみてください。大体理解できましたか?

まずブラウザが__proto__ポインタをサポートしているかどうかを確認します

配列のこれらの 7 つのメソッドを書き換え、__proto__ がサポートされているかどうかに応じて、書き換えた配列を配列のプロトタイプにポイントします。

簡単じゃないですか! ! !

ソースコードを見る

実装の原理がわかったところで、ソースコードを見てみましょう。ソースコードを見る主な目的は、作者がどのように実装したかをより深く理解することです。また、優れたコードエンコード方法を見て、そこから学ぶこともできます。

下のコードブロックにいくつか説明を書いておきました。

//https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js


//def メソッドは、Object.defineProperty カプセル化に基づくメソッドのレイヤーです。非常にシンプルです。探す手間を省くために、以下のコードを投稿します。
'../util/index' から { def } をインポートします 

//ネイティブ配列プロトタイプオブジェクトを保存します。const arrayProto = Array.prototype

// プロトタイプ接続を作成し、arrayMethods のプロトタイプを Array.prototype にポイントします
エクスポート const arrayMethods = Object.create(arrayProto)

const メソッドToPatch = [
  '押す'、
  'ポップ'、
  'シフト'、
  'シフト解除'、
  'スプライス'、
  '選別'、
  '逆行する'
]

methodsToPatch.forEach(関数 (メソッド) {
  // ネイティブメソッドをキャッシュ const original = arrayProto[method]
  def(arrayMethods, メソッド, 関数ミューテーター (...args) {
    var args = [], 
    len = 引数の長さ;
    while (len--) args[len] = arguments[len];
    const result = original.apply(this, args) // 元の配列メソッドの実行結果 const ob = this.__ob__ // この __ob__ は Observe のインスタンスです~~~~
    挿入させる
    スイッチ(メソッド){
      ケース 'プッシュ':
      ケース 'unshift':
        挿入された = 引数
        壊す
      ケース 'スプライス':
        挿入 = args.slice(2)
        壊す
    }
    if (inserted) ob.observeArray(inserted) // 配列が変更された場合は、再度observeArrayを呼び出します
    // 変更を通知する
    ob.dep.notify() //
    結果を返す
  })
})

これは Observer のコードです:

var Observer = 関数 Observer(値) {
    this.value = 値;
    this.dep = 新しい Dep();
    this.vmCount = 0;
    def(value, '__ob__', this); //ここで、Observeインスタンスが各オブジェクトデータにバインドされていることがわかります。したがって、上記のコードのthis.__ob__はこれです。if (Array.isArray(value)) { //ここで、データが配列型であるかどうかを判断します。そうであれば、observeArrayが使用されます。
      (hasProto) の場合 {
        protoAugment(値、配列メソッド);
      } それ以外 {
        copyAugment(値、配列メソッド、配列キー);
      }
      this.observeArray(value); //ここでは配列型のデータを次のように処理します} else {
      this.walk(値);
    }
  };

以下は observeArray の実装です。

Observer.prototype.observeArray = 関数 observeArray(items) {
    (var i = 0, l = items.length; i < l; i++) の場合 {
      observe(items[i]); // observeメソッドは以下のとおりです}
  };

ここでは、observe メソッドを見てみましょう。

関数 observe(値、asRootData) {
    if (!isObject(value) || value instanceof VNode) {
      戻る
    }
    var ob;
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = 値.__ob__;
    } それ以外の場合 (
      観察すべき &&
      !isServerRendering() &&
      (Array.isArray(値) || isPlainObject(値)) &&
      Object.isExtensible(値) &&
      !値._isVue
    ){
      ob = 新しいオブザーバー(値);
    }
    if (asRootData && ob) {
      ob.vmCount++;
    }
    戻り値
  }

これは def メソッドの実装に関するものです。非常に単純なので説明は省略します。

関数def (obj, キー, val, 列挙可能) {
    Object.defineProperty(obj, キー, {
      値: val、
      列挙可能: !!列挙可能、
      書き込み可能: true、
      設定可能: true
    });
}

上記は、Vue で配列の変更を監視する方法についての詳細です。Vue が配列を監視する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueで配列の変更を監視する方法
  • Vue 開発監視配列、オブジェクト、変数操作分析
  • Vue は配列の変更を監視し、ソースコード分析を行います。
  • Vue 携帯電話の物理監視キー + 終了プロンプト コード
  • Vue のディープ モニタリング (オブジェクトと配列の変更の監視) と監視例の即時実行
  • Vue親コンポーネントは子コンポーネントのライフサイクルを監視します
  • Vueはウィンドウを閉じるイベントをリッスンし、ウィンドウが閉じる前にリクエストを送信する機能を実装しています。
  • VueはTreeselect選択の変更操作を監視します
  • Vueはルートの変更を監視し、App.vueファイル内のページを更新します。

<<:  jsvc を使用して tomcat を起動する方法 (通常のユーザーとして実行)

>>:  (MariaDB) MySQL のデータ型とストレージメカニズムの包括的な説明

推薦する

MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...

マージンのマージの問題を解決する

1. 兄弟要素の余白を結合する効果は次のようになります: (2 つの間の間隔は 150 ピクセルでは...

Tomcat が IDEA のコンソールで文字化けを起こし、IDEA エンコーディングを UTF-8 に設定する方法

1. まず、TomcatログのエンコーディングとIdeaログ表示コンソールのエンコーディングを区別す...

docker compose idea CreateProcess error=2 システムは指定されたファイルを見つけることができません

Docker の作成Compose の紹介Compose は、マルチコンテナ Docker アプリケ...

マークアップ言語 - テキストの CSS スタイルを指定する

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Vue で Axios カプセル化を使用するための完全なチュートリアル

序文現在、プロジェクトでは、Axios ライブラリが HTTP インターフェース リクエストによく使...

MySQL 8.0.12 winx64 詳細なインストールチュートリアル

この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...

MySQLトリガーについて深く理解するための記事

目次1. SC テーブルを挿入または変更するときに、テスト スコアが 0 ~ 100 の範囲外の場合...

NginxはURLのパスに応じてアップストリームに動的に転送します

Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...

VMware vSphere 6.5 インストール チュートリアル (画像とテキスト)

vmware vSphere 6.5 は vSphere ソフトウェアのクラシック バージョンであ...

TSで最も一般的な宣言マージ(インターフェースマージ)

目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...

スクロールラグの問題を解決するためのオーバーフロースクロールの詳細な説明

序文div またはモジュールに overflow: scroll 属性を使用すると、iOS フォンで...

Linux CentOS 6.5 のアンインストール、tar、および MySQL のインストールチュートリアル

システム提供のMySQLをアンインストールする1. MySQLがシステムにインストールされているかど...

JavaScript 関数呼び出しの典型的なサンプルコード

目次JavaScript 関数呼び出しの典型的な例JS関数の定義と呼び出し方法要約するJavaScr...

js の getBoundingClientRect() メソッドの詳細な説明

1. getBoundingClientRect() 分析getBoundingClientRect...