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、点击获取元素宽度。

相关推荐
拓端研究室22 分钟前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W3 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端4 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程4 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏4 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083165 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js