定义: 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即调用这个函数,获取更新后的DOM
简而言之就是 数据更新,在DOM中渲染,立即执行这个函数
created() 钩子函数中进行DOM操作的 js 代码必须放在 Vue.nextTick() 中,因为此时 DOM 还未进行渲染,对DOM进行操作是不起作用的
<template>
<div class="vfor">
<div ref="container" style="margin:20px auto">{{msg}}</div>
<div v-if="msg1">msg1: {{msg1}}</div>
<div v-if="msg2" style="margin:20px auto">msg2: {{msg2}}</div>
<div v-if="msg3">msg3: {{msg3}}</div>
<button type="button" class="btn btn-outline-primary" @click="changeMsg" style="margin-top:20px">change msg</button>
</div>
</template>
<script>
export default {
methods:{
changeMsg(){
this.msg = "updated~~~~~~~~ bad bad bad"
this.msg1 = this.$refs.container.innerHTML
this.$nextTick(()=>{
this.msg2 = this.$refs.container.innerHTML;
})
this.msg3 = this.$refs.container.innerHTML
}
},
data(){
return{
msg:"good morning",
msg1:'',
msg2:'',
msg3:''
}
}
}
</script>
页面效果展示
点击按钮后
从上图中可以看出来 msg 和 msg2 改变了,msg1 和 msg3 仍然是 msg 未改变前的值
深入了解参考官网
https://cn.vuejs.org/v2/guide/reactivity.html#异步更新队列
https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats