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

相关推荐
yinuo几秒前
前端跨页面通讯终极指南①:postMessage 用法全解析
前端
c***979814 分钟前
Vue性能优化实战
前端·javascript·vue.js
哈哈O哈哈哈16 分钟前
ECMAScript 2025 正式发布:10 个让你眼前一亮的 JavaScript 新特性!
前端·javascript
哈哈O哈哈哈19 分钟前
2025 年值得关注的 CSS 新属性与功能
前端·css
我叫张小白。24 分钟前
TypeScript泛型进阶:掌握类型系统的强大工具
前端·javascript·typescript
麦麦在写代码24 分钟前
前端学习4
前端·学习
你听得到1127 分钟前
Web前端们!我用三年亲身经历,说说从 uniapp 到 Flutter怎么转型的,这条路我爬过,坑我踩过
前端·flutter·uni-app
葡萄城技术团队33 分钟前
在数据录入、指标补录、表单填报场景中,SpreadJS 具备哪些优势和价值
前端
孟陬1 小时前
AI 每日心得——AI 是效率杠杆,而非培养对象
前端
3秒一个大1 小时前
JavaScript 中的 Symbol:特性与实战应用
javascript