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 のデータ型とストレージメカニズムの包括的な説明

推薦する

ネイティブJSが様々なスポーツの均一な動きを実現

この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...

テキストまたはJSONを返すようにnginxを設定する方法

特定のインターフェースをリクエストするときに、指定されたテキスト文字列または JSON 文字列を返す...

グリーンスタイルのウェブデザイン作品18点の最新コレクション

トイ・ストーリー3 オンラインマーケティングウェブサイトゼンモバイル鉄から鉄へスプラウトファンドバー...

Dockerコンテナを終了した後も実行を継続する方法

現象:イメージを実行します (例: ubuntu14.04)。 docker run -it --r...

MySQL で置換操作を使用したときにデータ損失が発生する問題の解決策

序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...

ページコンテンツ全体を中央に配置して、高さがコンテンツに合わせて自動的に拡張されるようにする方法

ページコンテンツ全体を中央に配置する方法と、コンテンツに合わせて高さを自動的に拡大縮小する方法。これ...

必見の JavaScript 面接質問 10 選のまとめ (おすすめ)

1.これは1. 誰が誰に電話をかけますか?例: 関数foo(){ console.log(&quo...

MySQL のグループ分けの例

mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...

Vue の状態管理: Vuex の代わりに Pinia を使用する

目次1. ピニアとは何ですか? 2. Piniaは使いやすい3. ユーザーエクスペリエンス1. ピニ...

デザイン理論: デザインにおける階層

<br />原文: http://andymao.com/andy/post/80.ht...

jsBridgeの動作メカニズムを1つの記事で学ぶ

目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...

Dockerfile における ENV 命令の具体的な使用法の詳細な説明

1. Dockerfile 内の ENV 命令は、イメージの環境変数を定義するために使用されます。次...

ウェブページからテキスト透かしを削除する2つの簡単な方法

<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...

Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

目次序文1. MySQLをアンインストールする2. MySQLをインストールする要約する序文学習中に...

タブ切り替えを実装するための HTML サンプル コード

タブ切り替えもプロジェクトではよく使われる技術です。一般的にタブ切り替えはjsやjqを使って実装され...