Vue $nextTick

我们用一个例子来说明$nextTick的作用:

我们用一个变量showIpt来控制input框的显示和隐藏,默认是隐藏。

我们点击一个按钮后显示这个输入框的同时,input还要自动获取焦点。

但是我们点击按钮过后并没有生效。

为什么?this.showIpt=true执行过后接着就是执行this.$refs.ipt.focus() ,所有的代码执行完毕后将解析好的DOM放到页面上去。

也就是说,focus() 的时候DOM还没解析呢!

因此,我们就可以使用$nextTick() 来解决这个问题:

this.$nextTick( // 执行函数 )

$nextTick() 的作用就是在下一次DOM更新结束后执行其指定的回调。

当数据改变后,要对更新后的DOM进行一些操作时,就可以在$nextTick() 的回调函数中执行。

相关推荐
treesforest5 分钟前
前端表单提效实践:基于IP地理位置实现国家区号智能预填
前端·网络协议·tcp/ip·ip定位·ip属地
用户298698530147 分钟前
React 中 Word 文档转图片的实践方案
前端·javascript·react.js
Csvn7 分钟前
异步并发控制:手写并发池、竞态防护与取消的完整方案
前端·javascript
csuzhucong8 分钟前
二十一 - 四十阶魔方
javascript·css·html
专业抄代码选手15 分钟前
06|双缓冲与 Commit:让 Fiber 支持第二次渲染
前端·javascript·react.js
涛涛ing15 分钟前
4.8K Star!一套规则让 AI 帮你写出“像人写的”前端代码
前端
万物智能18 分钟前
OpenHarmony源码树解剖—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
前端·后端
天才熊猫君21 分钟前
通用虚拟滚动表格行拖拽排序:从思路到完整实现
前端·javascript
hh95023 分钟前
Agent Plan × DeepSeek Harness:角色 Prompt 驱动的 Agent 分工优化与协作质量实验
java·前端·人工智能·prompt·adg·agent plan·adg成都社区
xiaominlaopodaren24 分钟前
three.js最小地图运行时(九):TileKey 线框与 cursor 坐标探针
javascript·gis·three.js