So überwachen Sie Array-Änderungen in Vue

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


//Die Def-Methode ist eine Methodenschicht, die auf der Object.defineProperty-Kapselung basiert. Sie ist sehr einfach. Ich werde den Code unten posten, damit Sie nicht danach suchen müssen.
importiere { def } von '../util/index' 

//Speichern Sie das native Array-Prototypobjekt const arrayProto = Array.prototype

// Eine Prototypverbindung herstellen und den Prototyp von arrayMethods auf Array.prototype richten
exportiere const arrayMethods = Objekt.erstellen(arrayProto)

const methodsToPatch = [
  'drücken',
  'Pop',
  'Schicht',
  'aufheben',
  'spleißen',
  'Sortieren',
  'umkehren'
]

methodsToPatch.forEach(Funktion (Methode) {
  // Cache native Methode const original = arrayProto[Methode]
  def(ArrayMethods, Methode, Funktion Mutator (...args) {
    var args = [], 
    len = Argumente.Länge;
    während (Länge--) args[Länge] = Argumente[Länge];
    const result = original.apply(this, args) // Das ursprüngliche Ausführungsergebnis der Array-Methode const ob = this.__ob__ // Dieses __ob__ ist eine Instanz von Observe~~~~
    eingefügt lassen
    Schalter (Methode) {
      Fall 'push':
      Fall 'Unshift':
        eingefügt = Argumente
        brechen
      Fall 'Spleißen':
        eingefügt = args.slice(2)
        brechen
    }
    if (inserted) ob.observeArray(inserted) // Wenn sich das Array ändert, rufe observeArray erneut auf
    // Änderung melden
    ob.dep.notify() //
    Ergebnis zurückgeben
  })
})

var Beobachter = Funktion Beobachter(Wert) {
    dieser.Wert = Wert;
    dies.dep = neues Dep();
    dies.vmCount = 0;
    def(value, '__ob__', this); //Hier können Sie sehen, dass an jedes Objekt eine Observe-Instanz gebunden ist, daher ist this.__ob__ im obigen Code this if (Array.isArray(value)) { // Hier bestimmen wir, ob es sich um einen Array-Datentyp handelt. Wenn ja, wird observeArray verwendet
      wenn (hasProto) {
        protoAugment(Wert, ArrayMethoden);
      } anders {
        copyAugment(Wert, Array-Methoden, Array-Schlüssel);
      }
      this.observeArray(value); //Hier werden Daten vom Typ Array wie folgt verarbeitet} else {
      dies.walk(Wert);
    }
  };

Observer.prototype.observeArray = Funktion observeArray(Elemente) {
    für (var i = 0, l = Elemente.Länge; i < l; i++) {
      observe(items[i]); // Die observe-Methode lautet wie folgt}
  };

Funktion beobachten(Wert, asRootData) {
    if (!isObject(value) || Wertinstanz von VNode) {
      zurückkehren
    }
    var ob;
    wenn (hasOwn(Wert, '__ob__') && Wert.__ob__ Instanz von Observer) {
      ob = Wert.__ob__;
    } sonst wenn (
      sollteBeobachten &&
      !isServerRendering() &&
      (Array.isArray(Wert) || isPlainObject(Wert)) &&
      Objekt.isExtensible(Wert) &&
      !Wert._isVue
    ) {
      ob = neuer Beobachter(Wert);
    }
    if (asRootData && ob) {
      ob.vmCount++;
    }
    return ob
  }

Funktionsdefinition (Objekt, Schlüssel, Wert, aufzählbar) {
    Objekt.defineProperty(Objekt, Schlüssel, {
      Wert: val,
      aufzählbar: !!aufzählbar,
      beschreibbar: true,
      konfigurierbar: true
    });
}