20.Vue.$nextTick

Vue.$nextTick 当dom更新后触发，结合案例理解：

场景：页面种有个按钮(button)，一个隐藏的div，当点击button时，显示div并获取宽度，如果显示div时就获取宽度总是为零，放入Vue.$nextTick中获取。

案例

<template>
  <div>
      <button @click="getDivInfo">点击获取div高度,宽度是：{{divInfoW}}</button>
      <div v-show="isShow == true" id="divInfo" style="border:1px solid red;">这是一个div</div>
  </div>
</template>
<script>
export default {
  data(){
    return {
        isShow: false,
        divInfoW: 0
    }
  },
  methods:{
    getDivInfo(){
      //
      this.isShow = !this.isShow
      //如果设置true后立刻获取div宽度是0，因为dom还未更新完毕
      //this.divInfoW = document.getElementById('divInfo').offsetWidth;
      //放入nextTick中获取
      this.$nextTick(function(){
        this.divInfoW = document.getElementById('divInfo').offsetWidth;
      });
    }
  }
}
</script>