前端八股文 对$nextTick的理解

$nexttick是什么?

获取更新后的dom内容

为什么会有$nexttick ?

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

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

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

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

什么时候使用

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

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

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

相关推荐
万少1 小时前
使用Trae轻松安装openclaw的教程-附带免费token
前端·openai·ai编程
浪浪山_大橙子2 小时前
OpenClaw 十分钟快速,安装与接入完全指南 - 推荐使用trae 官方 skills 安装
前端·人工智能
忆江南2 小时前
iOS 可视化埋点与无痕埋点详解
前端
离开地球表面_992 小时前
金三银四程序员跳槽指南:从简历到面试再到 Offer 的全流程准备
前端·后端·面试
_柳青杨2 小时前
跨域获取 iframe 选中文本?自己写个代理中间层,再也不求后端!
前端
比尔盖茨的大脑2 小时前
事件循环底层原理:从 V8 引擎到浏览器实现
前端·javascript·面试
天才熊猫君2 小时前
Vue3 命令式弹窗原理和 provide/inject 隔离机制详解
前端
bluceli2 小时前
Vue 3 Composition API深度解析:构建可复用逻辑的终极方案
前端·vue.js
程序员ys2 小时前
前端权限控制设计
前端·vue.js·react.js
忆江南2 小时前
Flutter GetX 深入浅出详解
前端