Vue中this.$nextTick()的用法

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

看例子：

<template>
  <div>
    <p ref="p">{{msg}}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      msg: 'dom更新前'
    }
  },
  mounted() {
    this.msg = 'dom更新后',
    console.log(this.msg);
    console.log(this.$refs.p.innerText);
  }
};
</script>

 可以看到，p标签没有被dom更新，打印出来的还是之前的值

<template>
  <div>
    <p ref="p">{{msg}}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      msg: 'dom更新前'
    }
  },
  mounted() {
    this.msg = 'dom更新后',
    console.log(this.msg);
    this.$nextTick(() => {
      console.log(this.$refs.p.innerText);
    })
  }
};
</script>

可以看到this.$nextTick是在dom更新后才执行的