官网说明
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
我们知道,vue中dom更新是异步的,它会在所有数据更新完成后再去更新视图;想要获取更新后的dom,需要使用$nextTick(),它接受一个回调函数,将在dom更新后执行
案例
<template>
<div>
<div ref="box">{
{
text}}</div>
<button @click="change">切换</button>
</div>
</template>
<script>
export default {
data () {
return {
text:'老故事'
}
},
methods: {
change(){
this.text='新段子'
console.log(this.$refs.box.innerText); //老故事
this.$nextTick(()=>{
console.log(this.$refs.box.innerText); //新段子
})
}
},
}
</script>