什么是 nextTick 以及它在 Vue.js 中的作用？

Question

我阅读 了文档，但我仍然无法理解。

I know what data , computed , watch , methods do, but what is nextTick() used for in Vue .js？

原文由 hidar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一切都与时间有关

nextTick 允许您在更改某些数据并且 Vue.js 已根据您的数据更改更新虚拟 DOM _之后_，但 在 浏览器在页面上呈现该更改之前执行代码。

通常， 开发人员使用原生 JavaScript 函数 setTimeout 来实现类似的行为，但使用 setTimeout 在浏览器将控制权交还给您 _之前_（通过调用您的回调）将控制权交给浏览器。

例子

假设您更改了一些数据； Vue 然后根据该数据更改更新 vDOM（更改尚未由浏览器呈现到屏幕上）。

如果此时您使用 nextTick ，您的回调将立即被调用，并且浏览器将在该回调完成执行后更新页面。

如果您改为使用 setTimeout ，那么浏览器将有机会更新页面， 然后 您的回调将被调用。

您可以通过创建如下所示的小组件来可视化此行为：

（检查 此小提琴 以现场观看）

 <template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        msg: 'One'
    }
  },
  mounted() {
      this.msg = 'Two';

      this.$nextTick(() => {
          this.msg = 'Three';
      });
  }
}
</script>

运行本地服务器。您将看到正在显示的消息“三”。

现在，将 this.$nextTick 替换为 setTimeout ：

 setTimeout(() => {
    this.msg = 'Three';
}, 0);

重新加载浏览器。在看到“三”之前，您将看到“二”。

那是因为，使用 setTimeout ：

1. Vue 将 vDOM 更新为“二”
2. Vue 将控制权交给了浏览器
3. 浏览器显示“二”
4. 回调被调用
5. Vue 将 vDOM 更新为“三”
6. Vue 将控制权交给了浏览器
7. 浏览器显示“三”

但是使用 nextTick ，我们跳过第 2 步和第 3 步！ Vue 不会在第一次 vDOM 更新后传递控制权，而是 立即 调用回调，这会阻止浏览器更新，直到回调完成。在此示例中，这意味着从未实际显示“二”。

要了解 Vue 如何实现这一点，您需要了解 JavaScript 事件循环 和 微任务 的概念。

一旦你清楚了这些概念（呃），请检查 nextTick 的源代码。

原文由 Prashant 发布，翻译遵循 CC BY-SA 4.0 许可协议