Vue $nextTick

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

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

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

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

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

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

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

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

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

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

相关推荐
范什么特西几秒前
一些常用名词
开发语言·前端·javascript
晴天162 分钟前
前端打包工具全景解析
前端
晴天164 分钟前
Vite vs Webpack 全方位对比
前端·webpack·node.js
体毛旺盛的猿6 分钟前
HarmonyOS开发面试题
前端·华为·harmonyos
anOnion20 分钟前
构建无障碍组件之Landmarks Pattern
前端·html·交互设计
牧瀬クリスだ22 分钟前
前端三件套基础之JS!!!!
前端·javascript
乌夷24 分钟前
JavaScript 的事件循环
开发语言·javascript·ecmascript
风骏时光牛马25 分钟前
提示词工程:大模型交互的核心塑造技术
前端
单线程_0128 分钟前
从案例分析 Vue3 Tokenizer+Parser 源码四
前端·javascript·vue.js
30 分钟前
Python 图片处理:裁剪缩放至300×200,格式JPG/PNG/GIF,控制大小≤100KB
linux·前端·python