今天说说 Vue中的**this.$nextTick(()=>{})
**的作用
1.Vue中的nextTick涉及到Vue中DOM的异步更新,不同于其他操作,例如进行了点击添加了节点之后,Vue中的渲染层并没有更新,而是异步的。所以这个时候 this.$nextTick
就起作用了。
这里借助简书的一位博主的案例演示
博主的简书: https://www.jianshu.com/p/a7550c0e164f
模板:
<div class="app">
<div ref="msgDiv">{{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
Vue实例:
new Vue({
el: '.app',
data: {
msg: 'Hello Vue.',
msg1: '',
msg2: '',
msg3: ''
},
methods: {
changeMsg() {
this.msg = "Hello world."
this.msg1 = this.$refs.msgDiv.innerHTML
this.$nextTick(() => {
this.msg2 = this.$refs.msgDiv.innerHTML
})
this.msg3 = this.$refs.msgDiv.innerHTML
}
}
})
点击前:
点击后:
从图中可以得知:msg1和msg3显示的内容还是变换之前的,而msg2显示的内容是变换之后的。其根本原因是因为Vue中DOM更新是***异步***的
二、应用场景
下面了解下nextTick的主要应用的场景及原因。
在Vue生命周期的created()钩子函数
进行的DOM操作一定要放在Vue.nextTick()
的回调函数中
在created()
钩子函数执行的时候DOM
其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()
的回调函数中。与之对应的就是mounted()
钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
觉得简书这篇文章很有用。所以也就分享一下,并不是搬抄
参考文献:
作者:Ruheng
链接:https://www.jianshu.com/p/a7550c0e164f