前端八股文 对$nextTick的理解

$nexttick是什么?

获取更新后的dom内容

为什么会有$nexttick ?

vue的异步更新策略 (这也是vue的优化之一 要不然一修改数据就更新dom 会造成大量的dom更新 浪费性能)

这是因为message (data)数据在发现变化 的时候,vue 并不会立刻去更新 D om ,而是将修改数据的操作放在了一个异步操作队列中

如果我们一直修改相同数据,异步操作队列还会进行去

等待同一 事件循环 中的所有数据变化完成之 后,会将队列中的事件拿来进行处理,进行DOM的更新

什么时候使用

如果我们想要获得 dom更新后的数据 就 要用到$nexttick

代码例子 获取更新后的dom 数据

另一个使用场景 比如说我们拿到接口的数据 渲染列表 拿到渲染后的列表的高度 也需要用到 $nextTick

相关推荐
牛蛙点点申请出战16 分钟前
IconFontViewer -- 一个可以在 Android Studio 中实时预览 IconFont 的插件
android·前端·intellij idea
是上好佳佳佳呀1 小时前
【前端(十三)】JavaScript 数组与字符串笔记
前端·javascript·笔记
巴沟旮旯儿1 小时前
vite项目配置文件和打包
前端·设计模式
彩票管理中心秘书长1 小时前
Pinia 插件架构与组合式函数:如何让你的 Store 长出“超能力”
前端
彩票管理中心秘书长1 小时前
Pinia 比 Vuex 强在哪?我用同一个模块写了两种实现,你自己看
前端
yingyima1 小时前
用 Cron 加 Webhook 打通自动化工作的任督二脉
前端
JackieDYH1 小时前
CSS Flexbox 与 Grid 的默认行为-布局的底层机制
前端·css·html
彩票管理中心秘书长1 小时前
E2E测试入门:别让用户帮你点鼠标了,找个机器人替你打工吧
前端
菜蒙爱学习1 小时前
【Markdown】可用的所有 HTML 标准颜色
前端·html
里欧跑得慢1 小时前
CSS 嵌套:编写更优雅的样式代码
前端·css·flutter·web