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

Posted 2023-02-22

【中文标题】Vue：传递给 vm.$nextTick 的函数何时执行？

【英文标题】：Vue: when does a function passed to vm.$nextTick execute?

【发布时间】：2018-12-22 06:13:24

【问题描述】：

在我看来，流程应该是：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 更新的确切时间？

【问题讨论】：

***.com/a/47636157/239354

【参考方案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>

【讨论】：

@Archsx 我错了。 AFAIK，重新渲染仅由数据更改或对$forceUpdate 的调用触发。查看我的更新答案