vue的nextTick()方法，DOM异步操作方法

函数含义：vue数据更新后还需要隔一段时间才能将数据渲染到DOM界面，如果你在DOM还未更新的情况下获取展示此数据的标签内的内容，那你获得的还是未改变的数据。当DOM渲染完成后再获取展示此数据的标签内的内容将展示改变后的内容。nextTick(() => {"关于DOM的操作"})的作用就相当于setTimeout(() => {关于DOM的操作},"DOM更新完成的一瞬间")。

所以将有关提取界面上内容的数据也就是DOM的相关操作，放进nextTick()里面进行异步。     

举例  

<template>
  <div @click="divClick" ref="ceshi">
    {{message}}
  </div>
</template>
 
<script>
export default {
  name: 'index',
  data () {
    return {
      message:"old",
    }
  },
  methods:{
    divClick(){
      this.message="new"
      console.log(`这是证明数据已经改变${this.message}`);
      console.log(`这是直接获取标签内容${this.$refs.ceshi.innerText}`);
      setTimeout(() => {
        console.log(`这是延时一秒后的展示${this.$refs.ceshi.innerText}`)
      },1000)
      this.$nextTick(() =>{
        console.log(`这是放入nextTick后的展示${this.$refs.ceshi.innerText}`);
      })
    }
  }
}
</script>

效果：

 

使用情景：mounted之前触发的生命周期函数（父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子beforeMount -> 子 mounted -> 父 mounted）或者你在改变数据后需要异步获取还未渲染到界面上的数据。

nextTick()在你main.js引用vue之后是默认全局注册的，所以可以在.vue文件中直接使用：

this.$nextTick

vue的数据虽然是声明式的可以及时响应，但数据经过改变到渲染这段时间足以跑完你非异步执行的代码。这种问题的出现等同于网络接口还未获取到数据就进行数据赋值。