dom不刷新 vue 加数据后_vuejs - nextTick 解决异步 DOM 刷新问题

上周使用 vuejs 时，遇到这样的情况。更新了一个状态变量，此变量用于控制一个弹出输入框是否显示。但是变量置为 true 之后，下个逻辑 setfocus 却没有执行。

当时怀疑是 vuejs 并不是即时刷新的，所以导致 setfocus 失败。google 了一下，的确如此，使用 vuejs 内置的 nextTick 解决了，即将 setfocus 逻辑置于 nextTick 的回调函数中即可。

但是，vuejs 刷新 dom 的逻辑是怎样的呢？

nextTick 的用法

tick 中文翻译是，钟的嘀嗒声。这个词用的很应景，妙！

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

// modify data

vm.msg = 'Hello'

// DOM not updated yet

Vue.nextTick(function () {

// DOM updated

})

vuejs 异步更新队列

默认情况下，vuejs 是异步执行 dom 更新操作的。在下一个 tick 来临之前，vuejs 会收集数据变化，置于一个队列之中，下个 tick 来临之时，批量执行这些更新，并清空队列。

大部分情况下我们不需要关心这个更新 dom 机制，但是当下一步操作与之有关联时，我们就需要 nextTick 来解决了。