VUE(一)——nextTick

DOM更新循环结束后执行延迟回调,在数据修改以后立即使用该方法可获取更新后的DOM。

(*问题1)DOM更新循环?

VUE中使用异步执行DOM更新,在修改数据之后视图不会立即更新,而是等同一事件循环中的所有数据变化完成之后再统一进行视图更新。想要立即使用更新后的DOM,要调用nextTick方法,这样在DON更新后nextTick里的内容会立即执行。

事件循环:同步代码执行------》查找异步队列,推入执行栈,执行Vue.nextTick[事件循环1]------》查找异步队列,推入执行栈,执行Vue.nextTick[事件循环2]......

同步执行,异步更新,这也是DOM不会立即更新的原因。

(*问题2)下一次循环更新?

(*问题3)为什么在修改数据之后使用?

(*问题4)应用场景?

1、需要在视图更新之后,基于新的视图进行操作。

(*注)在created和mounted阶段,如果需要操作渲染后的视图,也要使用nextTick方法。mounted不会承诺所有的子组件一起被挂载,如果要等到整个视图都渲染完毕就可以用nextTick替换掉mounted。

2、点击按钮显示原本已v-show = false隐藏的输入框来获取焦点。

3、点击获取元素宽度。

相关推荐
weixin_449290011 分钟前
EverMemOS 访问外部(deepinfra)API接口
java·服务器·前端
鱼毓屿御6 分钟前
Tailwind CSS配置进阶
前端·css
Mr Xu_10 分钟前
Git常用指令
前端·git
Xxtaoaooo13 分钟前
React Native跨平台鸿蒙开发实战:JS 与 ArkTS Native的通信机制详解
javascript·react native·harmonyos
michael_ouyang15 分钟前
IM 会话同步企业级方案选型
前端·websocket·electron·node.js
betazhou18 分钟前
借用Deepseek写一个定期清理备份文件的ps脚本
开发语言·前端·javascript·ps·deepseek·清理备份文件
麦麦大数据21 分钟前
F076 中医中药知识智能问答与图谱构建研究系统 Vue+Flask+Neo4j
vue.js·flask·知识图谱·neo4j·智能问答·推荐算法·中医中药
英俊潇洒美少年21 分钟前
vue confirm、messageBox等弹窗关闭后焦点残留问题
前端·javascript·vue.js
东东最爱敲键盘21 分钟前
第7天 进程间通信
java·服务器·前端
harrain27 分钟前
vue3怎么扩展第三方依赖库内部逻辑(拿element plus举例)
前端·javascript·vue.js·elementui