Vue $nextTick

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

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

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

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

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

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

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

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

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

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

相关推荐
仿生狮子6 小时前
🎼 从文本到交互界面——GenUI 的中庸之道
前端·vue.js·markdown
wuhen_n7 小时前
LangChain 核心:Chain 链式调用实现复杂 AI 任务
前端·langchain·ai编程
往上跑山7 小时前
【Agentic RL / 强化学习 / OPD】OpenClaw-RL 源码阅读
前端
文心快码BaiduComate7 小时前
从个人效能到组织资产:文心快码企业版Agent Hub上线,提升团队AI编程效能
前端·后端·程序员
想不到ID了7 小时前
第八篇: 登录注册功能实现
java·javascript
咖啡星人k7 小时前
从需求到交付:我用MonkeyCode的AI Agent完成了一个React数据看板
前端·人工智能·react.js·monkeycode
sxlishaobin7 小时前
linux 自动清除日志 脚本
linux·服务器·前端
ZC跨境爬虫7 小时前
跟着 MDN 学CSS day_37:(从文档流到粘性定位的底层原理)
前端·javascript·css·ui·html
十九画生7 小时前
从“会用函数”到“理解函数”:JavaScript 中函数为什么也是对象?
javascript
IccBoY8 小时前
NVM超详细全解教程:解决Node版本冲突(Win/Mac/Linux安装+使用+踩坑合集)
前端·node.js