在 vuejs 中使用 vue $nextTick 和 setTimeout 0 有什么区别

Question

从Vue.js 文档中，$nextTick 被解释为：

推迟在下一个 DOM 更新周期后执行的回调。在您更改一些数据以等待 DOM 更新后立即使用它。

伟大的！所以第二个语句说在一些数据改变后立即使用它，我知道 setTimeout with 0 也被立即调用。我创建了这个小沙箱来理解这两种方法，但我似乎还是没有弄明白这两种方法之间的区别？

任何关于它们差异的解释将不胜感激。

Answer 1

不同之处在于$nextTick知道 DOM 何时更新并相应地触发，而setTimeout幂等并在指定的毫秒延迟后触发。请参阅有关后者的优秀答案，但要点是延迟是最小的，而不是确切的超时。

比如说，你有一些触发<input>元素包含的状态

<input ref="textBox" v-if="showTextBox">

使用$nextTick，您可以安全地执行以下操作，因为只有在 DOM 更新为包含<input>

this.showTextBox = true
this.$nextTick(() => {
  this.$refs.textBox.focus()
})

现在考虑（理论）情况，将其添加<input>到 DOM所需的时间长于触发setTimeout回调所需的时间

this.showTextBox = true
setTimeout(() => {
  // will throw "Uncaught TypeError: Cannot read property 'focus' of undefined"
  this.$refs.textBox.focus() 
}, 0)