En Vue3, puede usar la función nextTick para retrasar la ejecución de ciertas operaciones, que se realizarán después del siguiente ciclo de actualización de DOM. Esta función generalmente se usa para esperar a que se actualice el DOM y realizar algunas operaciones después de que se actualicen los datos, como obtener el tamaño y la posición del elemento DOM.
nextTick()
Por ejemplo, el siguiente componente cambia la visualización de un elemento:
<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>
Imprime el resultado:
Si show es verdadero, entonces el contenido es nulo, lo que significa que el DOM no está sincronizado con los datos del componente.
AñadimosnextTick()
<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>
Resultado de impresión:
Cuando el show es verdadero, se obtiene el dom.
nextTick() con asíncrono/espera
Si se llama a nextTick() sin argumentos, la función devuelve un promise que se resuelve cuando el cambio de datos del componente llega al DOM. promise
Esto ayuda a aprovechar una sintaxis asíncrona/en espera más legible. Ejemplos a continuación:
<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>
Resultados de:
Resumir
Cuando cambia los datos de un componente, Vue3 actualiza el DOM de forma asincrónica.
Si desea capturar el momento en que se actualiza el DOM después de que cambian los datos del componente, debe utilizar la función nextTick(callback) .
Su único parámetro de devolución de llamada se llama inmediatamente después de que se actualiza el DOM: y tiene la garantía de obtener el último DOM sincronizado con los datos del componente.
Como alternativa, si no proporciona un argumento de devolución de llamada a nextTick() , estas funciones devolverán un promise que se analiza cuando se actualiza el DOM.