vue中nextTick

vue中nextTick可以拿到更新后的DOM元素

如果在mounted下不能准确拿到DOM元素，可以使用nextTick

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

<div id="app">
      <div ref="msgDiv">{{msg}}</div>
      <div v-if="msg1">消息已传出: {{msg1}}</div>
      <div v-if="msg2">消息已传出: {{msg2}}</div>
      <div v-if="msg3">消息已传出: {{msg3}}</div>
      <br>
      <button @click="changeMsg">点我改变</button>
</div>

 new Vue({
   el:'#app',
   data:{
     msg:'你好，vue',
     msg1:'',
     msg2:'',
     msg3:''
   },
   methods:{
     changeMsg(){
       this.msg = 'hello world'
       this.msg1 = this.$refs.msgDiv.innerHTML
       this.$nextTick(()=>{
         this.msg2 = this.$refs.msgDiv.innerHTML
       })
       this.msg3 = this.$refs.msgDiv.innerHTML
     }
   }
  });

点击之前

点击之后

结果：msg1和msg3显示的内容还是变换之前的，而msg2显示的内容是变换之后的

说明Vue中DOM更新是异步的