Vue中的
nextTick
涉及到Vue中DOM的異步更新,感覺很有意思,特意瞭解了一下。其中關於nextTick
的源碼涉及到不少知識,很多不太理解,暫且根據自己的一些感悟介紹下nextTick
。
一、示例
先來一個示例瞭解下關於Vue中的DOM更新以及nextTick
的作用。
模板
<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()
的回調函數中。