为什么vue在nexttick之后不更新数据？

Question

我正在尝试了解 vuejs 的 nexttick 方法，但我不确定为什么在此示例中的 nexttick 之后没有更新消息..

new Vue({
  el: '#app',
  data: {
    message: 'one'
  },
  created() {
    this.message = 'two';
    this.$nextTick(() => {
      this.message = 'three';
    });
    this.message = 'four'
  }
})

如果我使用

回显它

<div id="app">
  <p>{{ message }}</p>
</div>

我只看到three。我明白为什么会显示一和二，因为 nexttick() 会快速更改数据，但是为什么没有显示 four 呢？

Answer 1

根据你的问题

但是为什么没有显示四个呢？

这是关于宏任务微任务问题。当你使用 nextTick 时，可能你的浏览器支持 promise，所以 Vue 会使用它来执行你的函数。

而且由于 promise 会被归类为 microtask，所以你的 nextTick 函数实际上是在 UI Render 之前完成的。

setTimeout 属于宏任务，你的函数会在 UI Render 之后的下一个事件循环中完成，你会在短时间内看到“四”！！

DOM 更新不等于 UI 渲染

Answer 2

当您调用$nextTick() 时，它会安排内部函数在下一个滴答中运行。但是，调用 $nextTick() 的函数将在传递给nextTick() 的函数被调用之前完成。

这是$nextTick()https://vuejs.org/v2/api/#vm-nextTick的官方文档

将回调推迟到下一个 DOM 更新周期后执行。采用 在您更改一些数据以等待 DOM 之后立即执行此操作 更新。这与全局 Vue.nextTick 相同，除了 回调的 this 上下文自动绑定到实例调用 这个方法。

this.message = 'three'; 最后被执行，这就是为什么你总是看到“三个”

您的代码实际上按以下顺序执行：

this.message = 'two';
this.message = 'four'
//then in the next tick of the event loop / DOM update which is likely instantaneous
this.message = 'three';

文件中代码的顺序并不能确定 javascript 引擎实际执行的顺序。