Se utiliza principalmente para solucionar el problema de que el DOM no se ha actualizado a tiempo después de que los datos cambian dinámicamente. NextTick se puede utilizar para obtener los últimos cambios de DOM después de la actualización de datos.
Escenario 1: haga clic en el botón para obtener el ancho de h1
<template>
<div>
<h1 ref="myWidth" v-if="show">{
{ message }}</h1>
<button @click="getWidth">获取h1元素宽度</button>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
message: ""
}
},
methods: {
getWidth() {
this.show = true
this.$nextTick(() => {
//这句代码如果不放在nextTick会报错，因为v-if动态创建销毁标签，牵扯到生命周期
this.message = this.$refs.myWidth.offsetWidth
})
}
}
}
</script>Escenario 2: haga clic en el botón para obtener el foco del cuadro de entrada
<template>
<div>
<input type="text" ref="myInput" v-show="show" id="id">
<button @click="getFocus">获取input元素焦点</button>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
}
},
methods: {
getFocus() {
this.show = true
this.$nextTick(() => {
document.getElementById("id").focus()
})
}
}
}
</script>Además, hay muchos escenarios de aplicación para nextTick, incluidas las funciones de agregar y editar formularios, y el error de mostrar datos en el mismo cuadro modal también se puede resolver usándolo.