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

//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() //
    結果を返す
  })
})

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(値);
    }
  };

Observer.prototype.observeArray = 関数 observeArray(items) {
    (var i = 0, l = items.length; i < l; i++) の場合 {
      observe(items[i]); // 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 (obj, キー, val, 列挙可能) {
    Object.defineProperty(obj, キー, {
      値: val、
      列挙可能: !!列挙可能、
      書き込み可能: true、
      設定可能: true
    });
}