组合式函数本身不参与渲染，但不当使用会间接拖慢性能：setup中同步耗时操作导致首屏延迟，高频watch/watchEffect挤占主线程，或返回状态被低效消费引发重复计算。

组合式函数本身不参与组件渲染，它的执行耗时一般不影响模板更新性能，但不当使用可能间接拖慢渲染——关键看它是否在响应式依赖链中触发高频重计算、是否在 setup 中执行重型同步逻辑、或是否引发不必要的副作用。

关注 setup 阶段的初始化开销

组合式函数在组件 setup 时同步执行，若内部包含大量计算、深克隆、复杂对象遍历或未加节流的监听逻辑，会延长组件创建时间，表现为首屏渲染延迟。

• 避免在 useXXX 内部做同步耗时操作（如解析大 JSON、遍历万级数组），可改用 onMounted 延后处理
• 检查是否误将非响应式逻辑（如格式化工具函数）包装成组合式函数——这类应直接作为普通工具函数调用
• 用浏览器 DevTools 的 Performance 面板 录制组件挂载过程，筛选 “scripting” 时间段，定位 setup 中耗时长的函数调用栈

警惕响应式副作用带来的重复执行

组合式函数若内部使用 watch、watchEffect 或 computed，并且监听了频繁变化的响应式源（如鼠标坐标、滚动位置、表单输入），可能引发高频回调，挤占主线程资源。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 确认 watchEffect 是否缺少防抖或 throttle 包裹（例如 useScroll、useMouse 应默认限制采样频率）
• 避免在组合式函数中对 props 或 reactive 对象做无条件深度监听（如 watch(obj, cb, { deep: true })），优先用 toRef 或精确监听字段
• 用 Vue Devtools 的 Performance 标签页 查看“Reactivity”事件频次，观察是否有异常密集的 trigger/effect 执行

区分「逻辑复用」和「渲染参与」

组合式函数只负责封装状态与逻辑，不生成 VNode。真正影响渲染的是：它返回的 ref/reactive 是否被模板读取、是否被 computed 依赖、是否触发了组件的响应式更新。

• 如果 useAsyncData 返回的 data 被 v-for 渲染，那数据量大小和 key 稳定性才决定渲染耗时，而非 useAsyncData 本身的执行时间
• 用 console.time / console.timeEnd 在组合式函数入口和 return 前打点，仅用于排查初始化瓶颈，不能代表渲染性能
• 性能瓶颈通常不在 useXXX 函数体，而在它返回的状态如何被消费——比如一个未 memoized 的 computed 多次调用 heavyCalc()

推荐轻量级验证方式

无需引入复杂监控，日常开发可用这几个低成本手段快速判断：

• 在组合式函数顶部加 console.time('useMyHook')，return 前加 console.timeEnd，观察首次执行是否超 5ms
• 在组件 mounted 后手动调用 performance.now() 对比 setup 前后时间差，估算初始化总开销
• 禁用该组合式函数（注释 import 和调用），对比组件 mountDuration（Vue Devtools → Components → 右键组件 → “Record render timing”）

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