Was ist vue.nexttick?

vue.nexttick ist eine Vue-Methode, die das aktualisierte DOM abruft. Die nextTick-Methode verzögert die Rückruffunktion, bis das DOM die Daten das nächste Mal aktualisiert und dann im DOM gerendert wird wird automatisch ausgeführt.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue-Version 2.9, Thinkpad T480-Computer.

Empfohlen: „vue Tutorial“

Was ist Vue.nextTick()?

Definition: Führen Sie einen verzögerten Rückruf nach dem nächsten DOM-Aktualisierungszyklus aus. Verwenden Sie diese Methode unmittelbar nach dem Ändern von Daten, um das aktualisierte DOM zu erhalten.

Also wurde diese Vue-Methode zum Abrufen des aktualisierten DOM abgeleitet. Daher sollte die in der Rückruffunktion Vue.nextTick() platzierte Ausführung der JS-Code sein, der das DOM betreibt. Verständnis: nextTick() verzögert die Rückruffunktion, bis der Dom die Daten das nächste Mal aktualisiert. Wenn die Daten im DOM aktualisiert und gerendert werden, wird diese Funktion automatisch ausgeführt Änderungen entsprechend einer bestimmten Strategie zum Aktualisieren des DOM. $nextTick führt einen verzögerten Rückruf aus, nachdem der nächste DOM-Aktualisierungszyklus endet. Wenn Sie $nextTick nach der Änderung der Daten verwenden, können Sie das aktualisierte DOM im Rückruf erhalten.

Wann müssen Sie Vue.nextTick() verwenden. ?

1. Die DOM-Operation, die von der Hook-Funktion „created()“ des Vue-Lebenszyklus ausgeführt wird, muss in der Callback-Funktion von „Vue.nextTick()“ platziert werden. Der Grund dafür ist, dass das DOM nicht tatsächlich gerendert wird, wenn die Funktion „created()“ ausgeführt wird. Die Hook-Funktion wird ausgeführt und die Ausführung von DOM-Operationen ist zu diesem Zeitpunkt sinnlos. Daher muss der JS-Code für DOM-Operationen in die Rückruffunktion von Vue.nextTick() eingefügt werden. Dies entspricht der gemounteten Hook-Funktion, da die gesamte DOM-Montage abgeschlossen ist, wenn diese Hook-Funktion ausgeführt wird.

<template>
  <div class="hello">
    <div>
      <button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      console.log(that.$refs.aa.innerText);   //that.$refs.aa获取指定DOM，输出：原始值
    }
  }
}
</script>

2. Wenn Sie nach dem Ändern der Daten des DOM-Elements im Projekt etwas auf der Grundlage des neuen DOM tun möchten, müssen Sie eine Reihe von js-Operationen für das neue DOM in die Rückruffunktion von Vue.nextTick einfügen. ); allgemeines Verständnis Ja: Nach dem Ändern der Daten müssen Sie sie verwenden, wenn Sie js verwenden möchten, um die neue Ansicht sofort zu bedienen

methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      that.$nextTick(function(){
        console.log(that.$refs.aa.innerText);  //输出：修改后的值
      });
    }
  }

Die korrekte Verwendung ist: Nachdem Vue die Dom-Elementstruktur geändert hat, verwenden Sie vue.$nextTick ()-Methode zum Implementieren einer verzögerten Ausführung nach der Aktualisierung der Dom-Daten Folgecode

 created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  },

Vue.nextTick(callback) Verwendungsprinzip:

Der Grund dafür ist, dass Vue Dom-Aktualisierungen asynchron durchführt, sobald Datenänderungen beobachtet werden. Vue öffnet eine Warteschlange und stellt sie dann in dieselbe Ereignisschleife (der Beobachter, der Datenänderungen in der Ereignisschleife beobachtet) und schiebt sie in diese Warteschlange. Wenn dieser Watcher mehrmals ausgelöst wird, wird er nur einmal in die Warteschlange verschoben. Durch dieses Pufferverhalten können unnötige Berechnungen und DOm-Operationen, die durch doppelte Daten verursacht werden, wirksam vermieden werden. In der nächsten Ereignisschleife löscht Vue die Warteschlange und führt die erforderlichen DOM-Aktualisierungen durch.

Wenn Sie vm.someData = 'new value' festlegen, wird das DOM nicht sofort aktualisiert, aber die erforderlichen DOM-Aktualisierungen werden durchgeführt, wenn die asynchrone Warteschlange gelöscht wird, d. h. wenn die Aktualisierung zu Beginn des durchgeführt wird nächste Ereignisschleife. Es treten Probleme auf, wenn Sie an dieser Stelle etwas auf der Grundlage des aktualisierten DOM-Status tun möchten. . 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.

Das obige ist der detaillierte Inhalt vonWas ist vue.nexttick?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!