Vue $nextTick

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

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

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

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

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

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

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

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

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

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

相关推荐
独孤九剑打醒他6 分钟前
【原创开源·航空终极篇】氢能航空动力升级:双燃料掺氢、富氧补气与露天储氢安全模型
前端·架构·开源·硬件工程·能源
律宏阔9 分钟前
阿里云 ESA + Pages 域名部分电脑无法访问
前端
毕业设计7039 分钟前
(免费领源码)基于node的学生公寓管理系统06412- java、PHP、python、C#、小程序、大数据、单片机、网络工程等)
vue.js·mysql·node.js·maven·mybatis·express·b/s
Lank_M13 分钟前
canvas 第一次画字没用上字体,字体却是它要来的
前端
古夕17 分钟前
iframe 授权失败时露出 60000 JSON 的复盘
前端·javascript
古夕20 分钟前
地址变了,页面是空的:一次 Vue Router 菜单切换复盘
前端·vue.js
JavaGuide21 分钟前
推荐一个好用 DeepSeek Harness 插件,直接把 Agent 上下文给可视化了!
前端·后端
数据掘金28 分钟前
白屏故障定位:从资源请求到路由渲染的排查顺序
前端
程序员Sunday32 分钟前
ES Module 和 CommonJS 有什么区别?循环依赖时会发生什么?
前端·javascript·面试
玲珑意39 分钟前
Vue 3 + DAG拓扑排序 + SSE流式人机协同:现代AI工作流编排系统的工程化实践
前端