vue.nextTick(更新)

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
作用：处理vue中dom的异步更新
Vue.nextTick(() => {}) / this.$nextTick(() => {// 更新完成})

<template>
  <div>
    <span>{{msg}}</span>
  </div>
</template>

<script>
export default {
data(){
  return{
    msg:'没有更新之前'//初始化msg
  }
},
methods:{
  updateMsg(){
    this.msg='更新完成'//
    console.log('aaa',this.$el.textContent)//没有更新之前
    this.$nextTick(()=>{//当数据更新时，在dom渲染之后，会自动执行callback回调函数
      console.log('bb',this.$el.textContent)//更新完成
    })    
  }
},
mounted(){//挂载后，模板渲染成html后调用
  this.updateMsg()
}
}
</script>

<style>

</style>

2.还可以当成promise函数使用

<template>
  <div>
    <span>{{msg}}</span>
  </div>
</template>

<script>
export default {
data(){
  return{
    msg:'没有更新之前'//初始化msg
  }
},
methods:{
  updateMsg(){
    this.msg='更新完成'//
    console.log('aaa',this.$el.textContent)//没有更新之前
    this.$nextTick()
    .then(function(){
        console.log('promise方法使用')
    })
  }
},
mounted(){//挂载后，模板渲染成html后调用
  this.updateMsg()
}
}
</script>

<style>

</style>