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

更新日期: 2016-09-26 阅读次数: 15167 分类: 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 来解决了。

领取阿里云图片 CDN 优惠券

阿里云 CDN 优惠券,最高可领 1888 元

爱评论不评论

近期节日

2019年04月01日 愚人节
2019年04月01日 复活节
2019年04月02日 国际儿童图书日
2019年04月04日 寒食节
2019年04月05日 清明节
2019年04月07日 世界卫生日
2019年04月11日 世界帕金森病日
2019年04月20日 谷雨
2019年04月22日 世界地球日
2019年04月23日 世界读书日
2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
查看更多节日