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

一切都与时间有关

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

通常，devs use the native JavaScript function setTimeout 可以实现类似的行为，但使用 setTimeout 会将控制权交给浏览器之前，它会将控制权交还给您（通过调用您的回调）。

例子

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

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

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

您可以通过创建如下所示的小组件来可视化此行为：
_{（检查 this fiddle 以实时查看）}

<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：

Vue 将 vDOM 更新为“二” Vue 将控制权交给了浏览器 浏览器显示“二” 回调被调用 Vue 将 vDOM 更新为“三” Vue 将控制权交给了浏览器 浏览器显示“三”

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

要了解 Vue 如何实现这一点，您需要了解 JavaScript Event Loop 和 microtasks 的概念。

一旦您清楚（呃）这些概念，请检查 source code for nextTick。

---

Next Tick 基本上允许您在对反应性属性（数据）进行一些更改后，在 vue 重新渲染组件之后运行一些代码。

// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
   // this function is called when vue has re-rendered the component.
})
    
// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
   .then(function () {
       // this function is called when vue has re-rendered the component.
    })

来自 Vue.js 文档：

推迟在下一个 DOM 更新周期后执行的回调。在您更改一些数据以等待 DOM 更新后立即使用它。

阅读有关它的更多信息，here。

---

为了使 Pranshat 对使用 nextTick 和 setTimeout 之间区别的回答更加明确，我分叉了他的小提琴：here

mounted() {    
  this.one = "One";
     
  setTimeout(() => {
    this.two = "Two"
  }, 0);
      
  //this.$nextTick(()=>{
  //  this.two = "Two"
  //})}
}

您可以在小提琴中看到，使用 setTimeOut 时，一旦组件在适应更改之前安装，初始数据会非常短暂地闪烁。然而，当使用 nextTick 时，数据在呈现给浏览器之前被劫持、更改。因此，浏览器显示更新的数据，甚至不知道旧数据。希望一举清除这两个概念。

---

我已经创建了一个有用的演示，在什么情况下我们可以在 Vuejs 中使用 nextTick，如果您想在 DOM 更新后立即更新或运行某些东西，请参阅 addMessage 函数，我正在调用另一个函数，其中我正在使用 nextTick 函数更新滚动到查看最新消息。

---