nextTick 用于在 DOM 更新后、重绘前执行操作，因 Vue 合并多次数据变更以避免重复渲染，直接读取 DOM 属性会获取旧值；推荐用 await nextTick()，需操作渲染结果时必须使用。
修改响应式数据后，DOM 不会立刻更新，而是等当前任务结束、微任务队列清空时统一刷新。nextTick 就是让你精准卡在这个“刷新完成、重绘之前”的时机去执行操作。
为什么必须用 nextTick？
Vue 把同一轮事件循环里的多次数据变更合并成一次 DOM 更新，避免重复渲染。比如连续赋值三次，最终只触发一次视图更新。但这也意味着：你改完数据马上查 DOM，拿到的还是旧内容。
- 直接访问
ref.value或this.message拿到的是最新数据，但 DOM 还没同步 -
document.getElementById、ref元素的textContent或offsetHeight等属性，在 nextTick 外读取大概率不准 - 不加 nextTick 就滚动、聚焦、校验位置，常出现“找不到元素”或“高度为 0”
两种写法怎么选？
推荐优先用 await nextTick() 形式，逻辑更直白、错误处理更可控；回调函数适合简单单次操作。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
async/await 写法（推荐）：
await nextTick()后续代码自动延后执行，不用嵌套，也方便 try/catch -
回调函数写法：
nextTick(() => { /* DOM 已就绪 */ })，适合不需要后续串行逻辑的场景，比如仅触发一次滚动 - 两者底层都走同一个微任务队列，执行顺序一致，不会因写法不同导致时机差异
典型使用场景
核心判断标准：只要操作依赖“渲染结果”，而不是“数据本身”，就需要 nextTick。
立即学习“前端免费学习笔记（深入）”；
-
动态显示/隐藏后访问元素：比如
v-if="show"切换后立即querySelector，必须等元素真实挂载 -
列表更新后滚动到底部或新项：
v-for渲染新增项后，scrollIntoView或scrollTop需等节点存在且尺寸计算完成 -
表单校验失败后定位第一个错误字段：错误提示是响应式生成的，
nextTick确保 DOM 中已插入对应提示节点再查找定位 -
第三方库初始化依赖真实 DOM 尺寸：如 ECharts、Swiper、地图容器，需等
ref元素渲染完毕并具备宽高后再调用resize或init
容易忽略的细节
nextTick 不是“等页面完全稳定”，它只管 Vue 自己的更新队列是否 flush 完毕。有些情况仍需额外注意：
- 如果更新触发了图片加载、字体渲染、CSS 动画等外部异步行为，nextTick 后可能还没呈现视觉效果，需结合
image.onload或getComputedStyle判断 - 在
onMounted中调用nextTick是安全的，但不是必须——mounted 本身已保证模板编译完成，只是子组件或异步内容可能未就绪 - 多个
nextTick调用会被合并进同一个微任务，不会重复排队；连续写三次await nextTick()和写一次效果一样
