Vue.$nextTick用法

vue是数据驱动视图更新,但vue数据变化后,视图不会立即更新,而是异步的过程.具体的更新时机参考主队列,异步队列这些.那么想要获取视图更新后的一些内容就不能直接在数据更新后直接获取,此时我们就需要借助Vue.nextTick,在视图更新后进行回调该函数

<template>
  <div class="home">
    <p ref="ppp" v-show="isshow">我是一列数据</p>
    <div @click="getPwidth">兄弟,点我</div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      isshow: false
    };
  },
  methods: {
    getPwidth() {
      this.isshow = !this.isshow;
      //console.log(this.$refs.ppp.offsetWidth); 打印出0
      this.$nextTick(() => {
        console.log(this.$refs.ppp.offsetWidth); //打印结果359
      });
    },
  },
};
</script>