Verwendung und Unterschied von Vue.set() und this.$set()

Wenn wir Vue zur Entwicklung verwenden, kann eine Situation auftreten: Nach dem Generieren einer Vue-Instanz werden die Daten beim erneuten Zuweisen manchmal nicht automatisch der Ansicht aktualisiert. Wenn wir uns das Vue-Dokument ansehen, werden wir einen solchen Satz finden: Wenn Sie der Instanz nach ihrer Erstellung neue Eigenschaften hinzufügen, wird keine Ansichtsaktualisierung ausgelöst. Der folgende Code fügt dem Studentenobjekt das Altersattribut hinzu

Daten () {
  zurückkehren {
    Student:
      Name: '',
      Geschlecht: ''
    }
  }
}
mounted () { //——Hook-Funktion, nachdem die Instanz mountet this.student.age = 24
}

Aufgrund der Einschränkungen von ES5 kann Vue.js das Hinzufügen oder Entfernen von Objekteigenschaften nicht erkennen. Da Vue.js beim Initialisieren der Instanz Eigenschaften in Getter/Setter umwandelt, muss die Eigenschaft im Datenobjekt vorhanden sein, damit Vue.js sie umwandeln und reaktionsfähig machen kann.

Richtige Schreibweise: this.$set(this.data,"key",value')

montiert () {
  dies.$set(dieser.student,"Alter", 24)
}

:: Vue erlaubt nicht das dynamische Hinzufügen reaktionsfähiger Eigenschaften auf Stammebene.

Zum Beispiel:

const app = new Vue({
  Daten: {
    ein: 1
  }
  // rendern: h => h(Suduko)
}).$mount('#app1')

Vue.set(app.data, 'b', 2)

Sie können die Methode Vue.set(object, propertyName, value) nur verwenden, um verschachtelten Objekten responsive Eigenschaften hinzuzufügen, zum Beispiel

var vm = neuer Vue({
    el:'#test',
    Daten:{
        //Das Info-Stammattribut ist bereits in den Daten vorhanden:{
            Name: „Xiaoming“;
        }
    }
});
//Fügen Sie der Info ein Geschlechtsattribut hinzu Vue.set(vm.info,'sex','男');

Implementierungsprinzip von Vue.set() und this.$set()

Schauen wir uns zunächst den Quellcode von Vue.set() an:

importiere { set } von '../observer/index'

...
Vue.set = setzen
...

Schauen wir uns den Quellcode von this.$set() an:

importiere { set } von '../observer/index'

...
Vue.prototype.$set = setzen
...

Als Ergebnis stellten wir fest, dass die Implementierungsprinzipien der beiden APIs, Vue.set() und this.$set(), im Wesentlichen gleich sind und beide die Set-Funktion verwenden. Die Set-Funktion wird aus der Datei ../observer/index exportiert. Der Unterschied besteht darin, dass Vue.set() die Set-Funktion an den Vue-Konstruktor bindet, während this.$set() die Set-Funktion an den Vue-Prototyp bindet.

Funktionssatz (Ziel: Array<beliebig> | Objekt, Schlüssel: beliebig, Wert: beliebig): beliebig {
  wenn (Prozess.env.NODE_ENV !== 'Produktion' &&
    (istUndef(Ziel) || istPrimitive(Ziel))
  ) {
    warnen(`Reaktive Eigenschaft kann nicht auf undefinierten, Null- oder primitiven Wert gesetzt werden: ${(target: any)}`)
  }
  wenn (Array.isArray(Ziel) && isValidArrayIndex(Schlüssel)) {
    Ziellänge = Math.max(Ziellänge, Schlüssel)
    Ziel.splice(Schlüssel, 1, Wert)
    Rückgabewert
  }
  if (Schlüssel in Ziel && !(Schlüssel in Objekt.Prototyp)) {
    Ziel[Schlüssel] = Wert
    Rückgabewert
  }
  const ob = (Ziel: beliebig).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'Produktion' && warn(
      'Vermeiden Sie das Hinzufügen reaktiver Eigenschaften zu einer Vue-Instanz oder ihren Stamm-$data' +
      „Zur Laufzeit – deklarieren Sie es im Voraus in der Datenoption.“
    )
    Rückgabewert
  }
  wenn (!ob) {
    Ziel[Schlüssel] = Wert
    Rückgabewert
  }
  defineReactive(ob.value, Schlüssel, Wert)
  ob.dep.notify()
  Rückgabewert
}

Wir haben festgestellt, dass die Set-Funktion drei Parameter empfängt: Target, Key und Val, wobei der Wert von Target ein Array oder Objekt ist, was genau den Parametern entspricht, die beim Aufruf der von der offiziellen Website angegebenen Vue.set()-Methode übergeben werden.

siehe:

In Vue aufgetretene Fallstricke --- Probleme bei der Änderungserkennung (Array-bezogen)

Damit ist dieser Artikel über die Verwendung und Unterschiede von Vue.set() und this.$set() abgeschlossen. Weitere verwandte Inhalte zu Vue.set() und this.$set() finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!