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

相关推荐
Ulyanov几秒前
PyVista与Tkinter桌面级3D可视化应用实战
开发语言·前端·python·3d·信息可视化·tkinter·gui开发
计算机程序设计小李同学几秒前
基于Web和Android的漫画阅读平台
java·前端·vue.js·spring boot·后端·uniapp
干前端2 分钟前
Message组件和Vue3 进阶:手动挂载组件与 Diff 算法深度解析
javascript·vue.js·算法
lkbhua莱克瓦243 分钟前
HTML与CSS核心概念详解
前端·笔记·html·javaweb
沛沛老爹4 分钟前
从Web到AI:Agent Skills CI/CD流水线集成实战指南
java·前端·人工智能·ci/cd·架构·llama·rag
和你一起去月球5 分钟前
动手学Agent应用开发(TS/JS 最简实践指南)
开发语言·javascript·ecmascript·agent·mcp
GISer_Jing12 分钟前
1.17-1.23日博客之星投票,每日可投
前端·人工智能·arcgis
代码游侠17 分钟前
学习笔记——ARM Cortex-A 裸机开发实战指南
linux·运维·开发语言·前端·arm开发·笔记
m0_7482546620 分钟前
CSS 编辑器
前端·css·编辑器
Amumu1213822 分钟前
React扩展(二)
前端·javascript·react.js