this.$nextTick 相关

一、官方说明

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM

二、原理

this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上

三、简单来说

因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的

四、 实例

有一个div，默认用v-if隐藏，点击按钮之后，改变v-if的值让它显示出来，并且读取到div中的值。

<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，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。