Vue中&nextTick()的使用方法

&nextTick()的基本使用

1.nextTick的调用时机及作用：

调用时间：当数据更新了，在dom中渲染后，会自动调用执行该函数
作用：简单来说就是 获取更新之后的dom

2.未使用nextTick()的情况：

<bottom @click=changeMsg() ref="btn">{{msg}}</bottom>

export default{
data(){
 return{
   msg:'hello'
  }
}，
methods:{
  changeMsg(){
    let that=this
    that.msg='hello1'
    console.log(this.$refs.btn.innerText);// 输出：hello
  }
}
}

由于vue实现响应式并不是数据改变，dom立即变化。
导致未使用nextTick的时候，立即去获取dom获取到的是改变之前的dom

3.使用nextTick()的情况：

<bottom @click=changeMsg() ref="btn">{{msg}}</bottom>

export default{
data(){
 return{
   msg:'hello'
  }
}，
methods:{
  changeMsg(){
    let that=this
    that.msg='hello1'
    that.&nextTick(function(){
        console.log(this.$refs.btn.innerText);// 输出：hello1
     })
  }
}
}