vue中的nextTick

lightwing發表於2021-09-09

vue.nextTick的官方定義是:
在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法,獲取更新後的 DOM。

實際上也就是傳進來的函式延遲到dom更新後再使用,也就是延遲執行了程式碼
下面有個網上的小例子:
<div class="app">
<div id="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>
<script>
new Vue({
el: '.app',
data: {
msg: 'Hello Vue.',
msg1: '1',
msg2: '2',
msg3: '3'
},
methods: {
changeMsg() {
this.msg = "Hello world"
var msgDiv=document.getElementById('msgDiv')
this.msg1 = msgDiv.innerHTML
// nextTick
this.$nextTick(() => {
this.msg2 = msgDiv.innerHTML
})
this.msg3 = msgDiv.innerHTML
}
}
})
</script>


沒有使用nextTick時,雖然有賦值操作,但是並沒有引起檢視層的更新,有了nextTick,我們只需要把要執行的函式傳遞給t

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/3407/viewspace-2817130/,如需轉載,請註明出處,否則將追究法律責任。

相關文章