In vue3 können Sie die Funktion nextTick verwenden, um die Ausführung bestimmter Vorgänge zu verzögern, die nach dem nächsten DOM-Aktualisierungszyklus ausgeführt werden. Diese Funktion wird normalerweise verwendet, um nach der Datenaktualisierung einige Vorgänge auszuführen und auf die Aktualisierung des DOM zu warten, z. B. das Abrufen der Größe und Position des DOM-Elements.
nextTick()
Zum Beispiel eine Komponente, die die Anzeige eines Elements umschaltet:
<template>
<div>
<button @click="handleClick">显示/移除</button>
<div v-if="show" ref="content">我是一个元素</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = () => {
show.value = !show.value
console.log(show.value, content.value)//true null
}
</script>Druckergebnis: false <div>Ich bin ein Element</div>
true null
Wenn show wahr ist, ist der Inhalt null, was bedeutet, dass das DOM nicht mit den Daten der Komponente synchronisiert ist. Wir fügen nextTick() hinzu
<template>
<div>
<button @click="handleClick">显示/移除</button>
<div v-if="show" ref="content">我是一个元素</div>
</div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = () => {
show.value = !show.value
nextTick(() => {
console.log(show.value, content.value)
})
}
</script>Druckergebnis: wahr <div>Ich bin ein Element</div>
nextTick() und async/await
Wenn nextTick() ohne Argumente aufgerufen wird, gibt die Funktion ein Versprechen zurück, das aufgelöst wird, wenn die Datenänderungen der Komponente das DOM erreichen.
Dies hilft, die besser lesbare Async/Await-Syntax zu nutzen. Zum Beispiel:
<template>
<div>
<button @click="handleClick">显示/移除</button>
<div v-if="show" ref="content">我是一个元素</div>
</div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = async () => {
show.value = !show.value
console.log(show.value, content.value)
await nextTick()
console.log(show.value, content.value)
}
</script>Ausführungsergebnis: true null
true <div>Ich bin ein Element</div>
Zusammenfassen:
Vue3 aktualisiert das DOM asynchron, wenn Sie die Daten einer Komponente ändern. Wenn Sie den Moment erfassen möchten, in dem das DOM nach Änderungen der Komponentendaten aktualisiert wird, müssen Sie die Funktion nextTick(callback) verwenden.
Ihr einzelner Rückrufparameter wird unmittelbar nach der Aktualisierung des DOM aufgerufen: und Sie erhalten garantiert das neueste DOM synchron mit den Komponentendaten. Wenn Sie alternativ kein Rückrufargument für nextTick() angeben, geben diese Funktionen ein Versprechen zurück, das aufgelöst wird, wenn das DOM aktualisiert wird.