在 vuejs 中使用 vue $nextTick 与 setTimeout 0 有啥区别
Posted
技术标签:
【中文标题】在 vuejs 中使用 vue $nextTick 与 setTimeout 0 有啥区别【英文标题】:What is the difference between using vue $nextTick vs setTimeout 0 in vuejs在 vuejs 中使用 vue $nextTick 与 setTimeout 0 有什么区别 【发布时间】:2020-12-19 12:18:21 【问题描述】:从Vue.js documentation,$nextTick 解释为:
将回调推迟到下一个 DOM 更新周期后执行。更改一些数据后立即使用它以等待 DOM 更新。
太棒了!所以第二条语句说在某些数据发生变化后立即使用它,我知道 setTimeout 与 0 也被立即调用。我创建了这个little sandbox 来理解这两种方法,但我似乎仍然没有理解这两种方法之间的区别?
我们将不胜感激任何关于它们差异的解释。
【问题讨论】:
【参考方案1】:不同之处在于$nextTick
知道DOM 何时更新并相应地触发,而setTimeout
是幂等的并在 指定的毫秒延迟后触发。后者见this excellent answer,但要点是延迟是最小的,而不是确切的超时。
例如,您有一些状态会触发包含 <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)
【讨论】:
那么说 $nextTick 劫持数据并在不知道旧数据的情况下呈现它是否正确? 并非如此。它不会劫持任何东西。这只是表示 DOM 发生了变化的触发器或信号以上是关于在 vuejs 中使用 vue $nextTick 与 setTimeout 0 有啥区别的主要内容,如果未能解决你的问题,请参考以下文章