主要用于处理数据动态变化后,DOM还未及时更新的问题,用nextTick就可以获取数据更新后最新DOM的变化。
场景一:点击按钮获取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>
场景二:点击按钮获取输入框的焦点
<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>
此外,nextTick的应用场景还有很多,包括表单新增和编辑功能,相同模态框显示数据的bug,也可利用其解决。