vue响应式更新是异步批量执行的，数据变更后dom不会立即更新，而是在下一个tick统一渲染；watcheffect无法追踪await后的依赖；自定义hook需避免async函数直接返回promise；测试时须用nexttick等待dom刷新。

Vue 响应式数据在异步操作中不会立即触发 DOM 更新，而是被收集进一个异步更新队列，在下一个事件循环“tick”中批量执行。这种设计不是缺陷，而是性能优化的核心机制——避免同一轮事件中多次修改数据导致重复渲染。

数据变了，DOM 没立刻更新

当你在 methods 或生命周期钩子中连续修改响应式数据（比如 this.count++ 两次），视图不会逐次重绘。Vue 会把这两次变更合并，只在下一轮微任务结束、DOM 重新渲染后统一更新一次。因此，直接读取 DOM 元素内容（如 document.getElementById('count').innerText）仍会得到旧值。

watchEffect 无法捕获 await 后的依赖

watchEffect 的依赖收集是同步完成的。一旦遇到 await，后续代码进入微任务队列，此时收集早已结束，导致：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 异步回调里的响应式变量（如 data.value = await fetch()）不会被自动追踪
• 若在异步块中修改了被 watch 的数据，可能触发重复执行甚至无限循环

自定义 Hook 中异步初始化易丢响应性

在 Vue 3 的组合式函数中，若写成 async function useX() { const res = await api(); return toRefs(res) }，会导致：

• 函数返回的是 Promise，而非响应式对象，解构出的值初始为 undefined
• toRefs 在数据尚未加载时就被调用，无法建立对后续赋值的响应式绑定
• 推荐做法：先用 reactive 创建空响应式对象，再在内部异步填充字段

测试时需显式等待 DOM 刷新

单元测试中触发点击或修改数据后，不能马上断言 DOM 内容。必须等待 Vue 完成异步更新，否则断言会失败。常用方式有：

• await wrapper.find('button').trigger('click')（多数测试工具已自动 await 异步方法）
• await nextTick() 或 await Vue.nextTick()（更明确、兼容性更好）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！