Vue.nextTick function(译)

In this article,you will learn about the Vue.nextTick callback function and when to make use of it.

In plain terms, Vue.nextTick gives you access to the data instance after it has been updated, the new changes effected on the DOM but not yet rendered on the web page.

简单来说，Vue.nextTick让你访问更新后的数据实例，新的变化在DOM上生效，但尚未在网页上呈现。

We can visualize its role by updating our data instance during the mounted life cycle hook and catching its effect midway.

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
    data() {
    return {
      msg: "First Message",
    };
  },
  mounted() {
    this.msg = "Second message";
  },
};
</script>

This would update our instance and render the new message. Let’s add the Vue.nextTick function, refresh our page and observe the change.

这将更新我们的实例并呈现新的消息。

让我们添加Vue.nextTick函数，刷新我们的页面并观察其变化。

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "First Message",
    };
  },
  mounted() {
    this.msg = "Second message";

    this.$nextTick(() => {
      this.msg = "Third message";
    });
  },
};
</script>