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."