Question

我认为该过程应为： DataChange-> DOM-Rerender->传递给$ nextTick execute的回调函数。对吗？但在下面的简单示例中，我无法弄清楚

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

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

不知道函数为什么执行（消息变为“ NEW MESSAGE”），因为我没有更改任何数据，我以为我必须更改像这样的数据。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>

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

1 个答案: