Was ist der Unterschied zwischen der Vue-Anweisung und $nextTick für den Betrieb von DOM?

Dieser Artikel führt Sie in den Artikel ein, in dem es darum geht, was der Unterschied zwischen der Vue-Anweisung und $nextTick für den Betrieb des DOM ist. Es hat einen guten Referenzwert und ich hoffe, dass dies der Fall ist Helfen Sie, wenn Sie es brauchen.

Asynchrone Update-Warteschlange

Vielleicht haben Sie es noch nicht bemerkt, dass Vue DOM-Updates asynchron durchführt. Immer wenn eine Datenänderung beobachtet wird, öffnet Vue eine Warteschlange und puffert alle Datenänderungen, die in derselben Ereignisschleife auftreten. Wenn derselbe Watcher mehrmals ausgelöst wird, wird er nur einmal in die Warteschlange verschoben. Diese Deduplizierung während der Pufferung ist wichtig, um unnötige Berechnungen und DOM-Operationen zu vermeiden. Beim nächsten „Tick“ der Ereignisschleife leert Vue dann die Warteschlange und führt die eigentliche (deduplizierte) Arbeit aus. Vue versucht intern, natives Promise.then und MessageChannel für asynchrone Warteschlangen zu verwenden. Wenn die Ausführungsumgebung dies nicht unterstützt, wird stattdessen setTimeout(fn, 0) verwendet.

Wenn Sie beispielsweise vm.someData = 'new value' festlegen, wird die Komponente nicht sofort erneut gerendert. Wenn die Warteschlange geleert wird, wird die Komponente beim nächsten „Tick“ aktualisiert, wenn die Ereignisschleifenwarteschlange gelöscht wird. In den meisten Fällen müssen wir uns um diesen Vorgang nicht kümmern, aber wenn Sie nach der Aktualisierung des DOM-Status etwas tun möchten, kann dies etwas schwierig sein. Während Vue.js Entwickler im Allgemeinen dazu ermutigt, „datengesteuert“ zu denken und das DOM nicht direkt zu berühren, gibt es Zeiten, in denen wir das wirklich tun müssen. Um zu warten, bis Vue die Aktualisierung des DOM nach den Datenänderungen abgeschlossen hat, können Sie Vue.nextTick(callback) unmittelbar nach den Datenänderungen verwenden. Diese Rückruffunktion wird aufgerufen, nachdem die DOM-Aktualisierung abgeschlossen ist. Zum Beispiel:

<p id="example">{{message}}</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

Die Verwendung der Instanzmethode vm.$nextTick() innerhalb einer Komponente ist besonders praktisch, da sie kein globales Vue erfordert und diese in der Callback-Funktion automatisch an die aktuelle Vue-Instanz gebunden wird:

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

vue-Befehl

Hook-Funktion

Ein Befehlsdefinitionsobjekt kann den folgenden Hook bereitstellen Funktionen (beide sind optional):

bind: Wird nur einmal aufgerufen, wenn die Anweisung zum ersten Mal an ein Element gebunden wird. Hier können einmalige Initialisierungseinstellungen vorgenommen werden.

eingefügt: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (nur der übergeordnete Knoten ist garantiert vorhanden, wird aber nicht unbedingt in das Dokument eingefügt).

Aktualisierung: Wird aufgerufen, wenn der VNode der Komponente aktualisiert wird, kann jedoch erfolgen, bevor der untergeordnete VNode aktualisiert wird. Der Wert der Richtlinie kann sich geändert haben oder auch nicht. Sie können jedoch unnötige Vorlagenaktualisierungen ignorieren, indem Sie die Werte vor und nach der Aktualisierung vergleichen (siehe unten für detaillierte Parameter der Hook-Funktion).

componentUpdated: Wird aufgerufen, nachdem alle VNodes der Komponente, in der sich die Anweisung befindet, und ihre Unter-VNodes aktualisiert wurden.

unbind: Wird nur einmal aufgerufen, wenn die Bindung der Anweisung vom Element gelöst wird.

Hook-Funktionsparameter (d. h. el, binding, vnode und oldVnode).

Es ist zu beachten, dass das Dokument während der Aktualisierung möglicherweise nicht in das DOM eingefügt wurde, aber „componentUpdated“ bedeutet, dass das Dokument in das DOM eingefügt wurde. Darüber hinaus sind die Auslösebedingungen der sogenannten „Update“-Hook-Funktion sehr weit gefasst und schwer zu kontrollieren. Beispielsweise führen Aktualisierungen anderer benachbarter Knoten, die nicht mit dem Knoten in Zusammenhang stehen, zu einem Reflow seines Layouts, was auch dazu führt, dass die Hook-Funktion ausgelöst wird

Daher, wenn Sie das DOM nach den Daten bedienen möchten Wird aktualisiert, verwenden Sie den Befehl „update“. ComponentUpdated muss vorsichtig sein. Sie können die Verwendung von nextTick in Betracht ziehen

Empfohlene verwandte Artikel:

Zusammenfassung der Methode zum Packen des Vue-Projekts nach Umgebung

V-Modell-Implementierungsprinzip Was ist das? Einführung in die Verwendung des V-Modells (mit Code)

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen der Vue-Anweisung und $nextTick für den Betrieb von DOM?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!