$nextTick()的作用

什么是nextTick()

vue更新dom是异步操作的，$nextTick()是用来知道什么时候dom更新完成

实例

有一个div，默认用v-if隐藏，点击按钮之后，改变v-if的值让它显示出来，并且读取到div中的值。
下面列举两个方法来对比$nextTick

<template>
  <div>
    <div id="changeDom" v-if="showDiv">显示文本</div>
    <button @click="showAndGetText1">获取内容</button>
  </div>
</template>

<script>
export default {
  //
  data() {
    return {
      showDiv: false,
    };
  },
  mounted() {},
  watch: {},
  methods: {
    showAndGetText() {
      this.showDiv = true;
      this.$nextTick(function () {
        let text = document.getElementById("changeDom").innerHTML;
        console.log("内容为：", text);
        alert(text);
      });
    },
    showAndGetText1() {
      this.showDiv = true;
      let text = document.getElementById("changeDom").innerHTML;
      console.log("内容为：", text);
    },
  },
};
</script>
<style>
</style>

当代码执行showAndGetText1()方法时，此时changeDom还未渲染完毕，就会报innerHTML of null的错误。
这里涉及到一个Vue的重要概念：异步更新队列。
Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。
知道了Vue异步更新DOM的原理之后，上面的现象就不难理解了，事实上在this.showDiv = true时，div仍然是没有被创建出来的，仍然读取的是这一次事件循环的DOM，而实际上在这一次事件循环中，DOM并没有更新，所以是读取不到的。
我们需要等下一个Vue事件循环，DOM更新完成后再读取，就可以读取到了。
这时候就是$nextTick起作用的时候了，执行showAndGetText方法就是正确的返回结果。

理论上，我们不应主动去操作DOM，因为Vue的核心思想就是数据驱动DOM，但在很多业务里，我们避免不了会操做一些DOM,这时我们就有可能用到$nextTick。