前端八股文 对$nextTick的理解

$nexttick是什么?

获取更新后的dom内容

为什么会有$nexttick ?

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

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

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

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

什么时候使用

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

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

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

相关推荐
HWL56796 分钟前
使用CSS实现,带有动态浮动高亮效果的导航菜单
前端·css
GISer_Jing7 分钟前
AI Agent技能Skills设计
前端·人工智能·aigc·状态模式
大漠_w3cpluscom10 分钟前
使用 sibling-index() 和 if() 实现动态的 :nth-child()
前端
小江的记录本24 分钟前
【PageHelper】 【Spring Boot + MyBatis + PageHelper】 完整项目示例+PageHelper核心原理深度解析
java·前端·spring boot·后端·sql·spring·mybatis
JamesYoung797126 分钟前
第九部分 — 打包、调试和发布 发布前的打包与发布检查清单(Chrome 应用商店)
前端·chrome
多加点辣也没关系27 分钟前
Node.js 与 npm 的安装与配置(详细教程)
前端·npm·node.js
张3蜂28 分钟前
OpenClaw如何调用Cursor
前端·chrome
KIO no way29 分钟前
npm全局安装命令不可用解决方案
服务器·前端·npm·node.js
A923A29 分钟前
【Vue3大事件 | 项目笔记】第五天
前端·vue.js·笔记·前端项目
bugcome_com30 分钟前
全面入门 ASP.NET:从 Web Pages 到 MVC 与 Web Forms 的系统教程
前端·asp.net·mvc