vue 中组件的（props 或 state）发生变化时不会立刻在 DOM 中响应，Vue 是异步更新 DOM的。所以有时当你修改了组件状态后，立刻获取对应dom对象，会发现获取不到。这个时候，就要用到Vue.nextTick()。

让我们详细的看看nextTick()函数是如何工作的。

1.Vue.nextTick()

更改 Vue 组件数据时，DOM 会异步更新。Vue 会从所有组件中收集对虚拟 DOM 的多次更新，然后尝试创建一个批处理来更新 DOM。

例如，让我们看下一个切换元素显示的组件：

<template>
  <div>
    <button @click="handleClick">显示/隐藏</button>
    <div v-if="show" ref="content">hello world!</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
      console.log(this.show, this.$refs.content);
    },
  },
};
</script>

单击 显示/隐藏 按钮更改 this.show 值，然后使用指令 v-if="show" 切换 <div id="content">元素的显示。

在 handleClick 函数中，分别在控制台打印了this.show 和 this.$refs.content（包含该<div>元素的引用） 的元素对象，此时会发现他们的结果不一致。当 this.show 值为 true 时, 结果 this.$refs.contentis 值却是 undefined，这意味着 DOM 与组件的数据不同步。

如果你想捕捉 DOM 刚刚更新的那一刻，那么你需要使用一个特殊的函数 Vue.nextTick(callback)。

在DOM响应数据的变化后，会立刻执行 callback 回调函数。

<template>
  <div>
    <button @click="handleClick">显示/隐藏</button>
    <div v-if="show" ref="content">hello world!</div>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
      Vue.nextTick(() => {
        console.log(this.show, this.$refs.content);
      });
    },
  },
};
</script>

这时，点击 显示/隐藏 按钮更改 this.show 值时，您会看到 this.$refs.content 与 this.show 值完全对应。

2. this.$nextTick()

Vue 允许在组件实例上使用 this.$nextTick(callback)。

在下面的示例 handleClick() 方法中更改 this.show 值，并使用 this.$nextTick() 捕捉DOM的更新：

<template>
  <div>
    <button @click="handleClick">显示/隐藏</button>
    <div v-if="show" ref="content">hello world!</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
      this.$nextTick(() => {
        console.log(this.show, this.$refs.content);
      });
    },
  },
};
</script>

如果要访问当前组件实例的更新使用 this.$nextTick() 更方便。

3. 带有async/await的 nextTick()

如果在没有参数的情况下调用 Vue.nextTick() 或 this.$nextTick()，则函数返回一个 promise。

使用 async/await 语法更具可读性的。

例如，让我们通过使用以下 async/await 语法捕获 DOM 更新：

<template>
  <div>
    <button @click="handleClick">显示/隐藏</button>
    <div v-if="show" ref="content">hello world!</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    async handleClick() {
      this.show = !this.show;
      await this.$nextTick();
      console.log(this.show, this.$refs.content);
    },
  },
};
</script>

async handleClick() 已被标记为异步函数。

点击 显示/隐藏 按钮时，this.show 值会发生变化。

await this.$nextTick() 等待DOM的更改，在控制台打印 console.log(this.$refs.content) 引用的元素对象。

建议使用 async/await 语法，因为它比回调方法更具可读性。

4.总结

1. 当您更改组件的数据时，Vue 会异步更新 DOM。
2. 如果你想在组件的数据发生变化后立刻捕捉到 DOM 的更新，那么你需要使用 Vue.nextTick(callback) 或 this.$nextTick(callback) 函数。
3. 他们的 callback 参数将在 DOM 更新后立即调用，并且保证您获得与组件数据同步的最新 DOM。
4. 如果您不为 Vue.nextTick() 或 this.$nextTick() 提供回调参数，那么将返回一个promise，该promise 将在 DOM 更新时被解析执行。
5. 将其与 async/await 语法一起使用将比回调方法更具可读性。