$nextTick作用

vue中更新dom是异步操作，在修改完数据后，视图不会立刻更新，而是当同一事件循环中的所有数据变化完成之后，再进行统一的更新，所以有的时候在修改完数据后想要获取更新后的dom，则需要在nextTick中获取，nextTick的作用就是在当前渲染完成后执行，解决了异步获取不到更新后dom问题，本质是反回promise;

<template>
  <div>
    这里是主页
    <button @click="clickMe">测试</button>
    <span id="span" ref="xx1">{{ XJ }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      XJ: 11,
    };
  },
  methods: {
    clickMe() {
      this.XJ = 22;
      this.$nextTick(function () {
        var text = document.getElementById("span").innerHTML
        console.log(text);
        });
    },
  },
};
</script>

<style>
</style>