vuejs - nextTick 解决异步 DOM 刷新问题

更新日期: 2016-09-26 阅读次数: 15925 分类: VueJS

上周使用 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 来解决了。

爱评论不评论

近期节日

2019年05月30日 五卅运动纪念
2019年05月31日 世界无烟日
2019年06月01日 六一儿童节
2019年06月05日 世界环境日
2019年06月06日 芒种
2019年06月06日 全国爱眼日
2019年06月07日 端午节
2019年06月11日 中国人口日
2019年06月16日 父亲节
2019年06月20日 世界难民日
2019年06月21日 夏至
2019年06月22日 中国儿童慈善活动日
查看更多节日