$nextTick解决了什么问题:
当数据更新,dom没有更新,获取不到最新的dom问题
<template>
<div>
<p ref="myp">msg:{{msg}}</p>
<p>msg1:{{msg1}}</p>
<p>msg2:{{msg2}}</p>
<button @click="changeIt">改变</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:"HI vue",
msg1:'',
msg2:''
}
},
methods:{
changeIt(){
this.msg = '我爱 中国';
this.msg1 = this.$refs.myp.innerHTML;
//在浏览器运行然后点击改变按钮:msg的值为"我爱 中国",而msg1的值还是"HI vue"
//原因是msg的数据虽然已经改变,但新的dom却还没有渲染
//改变这个问题要用到$nextTick方法
this.$nextTick(()=>{
this.msg2 = this.$refs.myp.innerHTML;
//保存,点击改变按钮msg2的值成功变为"我爱 中国"
})
}
}
}
</script>
$nextTick 使用场景:
- 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
- 在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构时侯,这个操作应该放进Vue.nextTick()的回调函数中。