Vue：传递给 vm.$nextTick 的函数何时执行？

Question

在我看来，流程应该是：DataChange --> DOM-Rerender --> 传给$nextTick的回调函数执行。对吗？但是在下面的简单示例中，我无法弄清楚

<div id='app'>
  {{msg}}
</div>

  let app = new Vue({
  el:'#app',
  data:{
    msg:'message'
  },
  mounted(){
    this.$nextTick(()=>{
      this.message = 'NEW MESSAGE'
    })
  }
})

我不知道为什么函数执行（消息变成'NEW MESSAGE'），'因为我没有改变任何数据，我想我必须改变像'this.someDataProperty = foo ' 所以传递给 $nextTick 的回调可以执行？

我阅读了有关 vm.$nextTick 的文档，它说传递给 nextTick 函数的回调将在下一次 DOM 更新后执行。但是 下一次 DOM 更新是什么？ 是关于时间还是浏览器重绘？如果数据更改可能随时发生，那么下一个 DOM 更新是什么？像这样：

//...
mounted(){
 this.msg = 'foo'
 axios.get('//bar.com').then(response=>{
   this.msg = response.msg
 })
 axios.get('//baz.com').then(response=>{
   this.msg = response.msg
 })
 this.$nextTick(function(){
   console.log(document.querySelector('#app').innerHTML)
 })
}

谁能告诉我何时下一次 DOM 更新的确切时间？

Answer 1

您对this.$nextTick 的理解略有错误。当您将回调传递给$nextTick 时，Vue 将在执行回调之前等待 DOM 更新（因为任何未完成的数据更改）。但是，如果没有未完成的数据更改，也没有 DOM 更新，回调将立即被调用。 documentation 诚然不清楚这种行为，但您可以在 source code 中看到逻辑。

您似乎想在 DOM 更新时更改一个值。为此，您可以使用 updated 生命周期挂钩。

这是一个示例，更改输入字段的绑定值将更新 DOM，从而触发 updated 挂钩，更新 this.msg 的值：

new Vue({
  el: '#app',
  data() {
    return { 
      msg: 'foo',
      value: 'text'
    }
  },
  updated() {
    this.msg = 'bar';
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  {{ msg }}
  <input v-model="value"/>
</div>