curTain

一个小demo弄懂vue的$nextTick的作用

有这样一段代码:

代码截图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<div id="app">
<span id="span" v-if="showSpan" >span</span>
<button @click="btn" >显示</button>
</div>
<script>
new Vue({
el: "#app",
data: {
showSpan: false
},
methods: {
btn(){
this.showSpan = true
console.log( document.querySelector("span") )
setTimeout( () => {
console.log( "200毫秒后" )
console.log( document.querySelector("span") )
}, 200 )
this.$nextTick( () => {
console.log( "$nextTick执行的结果" )
console.log( document.querySelector("span") )
} )
}
}
})
</script>

执行结果:

分析

第一个结果为null,因为没有找到dom元素,
第二个出现的是$nextTick执行的结果,是确定dom重新渲染挂载完毕执行的回调函数
第三个才是定时器的结果,是在最后执行的函数。

结论

可知,vue中数据更新引起的dom更新是异步执行的。

小拓展

v-if和v-show的区别

当我们把上文的 v-if 改成 v-show 后,我们可以看到:

可以看出,v-if=false 时,元素不会渲染到页面,使用 v-show 元素一直在页面中,只是设置样式 display: none; 没有显示而已,


 评论