Vue中的异步更新、$nextTick

当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变,都仅执行一次更新。

nextTick() 可以在状态改变后立即使用,以等待 DOM 更新完成。你可以传递一个回调函数作为参数,或者 await 返回的 Promise。

以“点击编辑,显示编辑框并且自动获取焦点”为例

先准备好基础页面,并且将内容渲染至页面

Vue中的异步更新、$nextTick_第1张图片Vue中的异步更新、$nextTick_第2张图片

现在就是这样的效果

Vue中的异步更新、$nextTick_第3张图片Vue中的异步更新、$nextTick_第4张图片

然后来给编辑按钮注册点击事件

并且用methods提供一个方法

handelEdit()

Vue中的异步更新、$nextTick_第5张图片

点击编辑按钮,触发事件,显示input框

Vue中的异步更新、$nextTick_第6张图片

当显示完成之后,要注意用this.$refs.inp.focus()是不能成功的。此时就需要我们 $nextTick 登场了

原因:Vue是异步更新DOM(提升性能)

$nextTick 等DOM更新后,才会触发执行此方法里的函数体

this.$nextTick(() => {})

Vue中的异步更新、$nextTick_第7张图片Vue中的异步更新、$nextTick_第8张图片

下面是完整代码,参考一下





你可能感兴趣的:(Vue,vue.js,前端)