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。我理解为什么一个和两个是showng因为nexttick（）快速更改数据，但为什么four没有显示呢？

Answer 1

当你致电$nextTick()时，它会安排内部功能在下一个时间点运行。但是，调用 $nextTick()的函数将在调用传递到nextTick()的函数之前完成。

以下是$nextTick() https://vuejs.org/v2/api/#vm-nextTick

的官方文件

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

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引擎实际执行它的顺序。

Answer 2

根据您有关的问题

但是为什么不显示四个呢？

关于宏任务微任务问题。当您使用nextTick时，也许您的浏览器会提供支持，所以Vue将使用它来执行您的功能。

由于承诺会被归类为微任务，因此nextTick函数实际上是在UI渲染之前完成的。

setTimeout被分类为宏任务，您的函数将在UI Render之后的下一个事件循环中完成，您将在短时间内看到“四个”！

DOM更新不等于UI渲染

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

2 个答案: