$nextTick
官方文档
vm.$nextTick( callback ) callback Function 延迟回调的执行直到下一次 DOM
更新循环结束。当你改变一些数据之后调用它,当回调触发时 DOM 已经更新完毕。这和全局的 Vue.nextTick 效果相同,只是回调的
this 上下文会自动指向调用此方法的实例。
开发中遇到的问题
当你改变vue中某一组件内数值时、该组件不会立即重新渲染,而是加入事件循环队列,待事件循环队列执行当前时间时开始渲染,而如果你想在DOM更新后做一些操作,就需要使用$nextTick,
否则会发生下面的情况
<div id="app">
<div ref="Div1">{{msg}}</div>
<div v-if="Div2">{{Div2}}</div>
<div v-if="Div3">{{Div3}}</div>
<input type="button" value="change" @click="changeDiv"/>
</div>
data(){
return{
msg: '渲染前',
Div2:"",
Div3:""
}
},
methods:{
changeDiv(){
this.msg = "渲染后"
//不使用用nextTick方法直接拿到fDiv的内容会拿到渲染之前的信息
//Div2被赋值为渲染前
this.Div2=this.$refs.Div1.innerHTML
//Div3被赋值为渲染后
this.$nextTick(() => {
this.Div3 = this.$refs.Div1.innerHTML
})
}
}
点击按钮
小结
Vue希望开发人员遵循“数据驱动”的方式,而不是直接操作 DOM,但是有时我们确实要这么做。为了在DOM更新后使用,变化之后的数据,可以在数据变化后用Vue.nextTick(callback)。
- 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中(created中还未挂载dom)