vue中的nextTick

Posted 2020-11-08

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