排查Vue 3卡顿需定位高频触发的副作用函数，检查依赖是否过宽、watch未节流、computed重操作、闭包捕获旧状态及副作用未清理，并通过Devtools Performance与Components面板验证根因。
排查 Vue 3 中由副作用函数（ReactiveEffect）引发的卡顿，核心是定位“谁在反复触发”“触发了什么”“是否必要”。这不是模板慢或 DOM 多的问题，而是响应式依赖链被高频、宽泛或错误地激活，导致渲染函数或 watch 回调被不必要地重复执行。
看 Devtools Performance 面板识别高开销副作用
必须先启用计时功能：
• 在 Vue Devtools 设置中勾选 Record component render timing
• 在 main.js 顶部加 __vue_devtools_disable_timing__ = false
• Vue 3 项目还需设置 app.config.performance = true
录制一次卡顿操作（如快速输入、滚动、切换 tab），停止后重点观察：
• 时间轴上颜色深、宽度大的色块 —— 悬停看组件名和“自身耗时”
• 若某组件“自身耗时”占总耗时 80% 以上，说明瓶颈就在它内部的副作用逻辑里
• 渲染次数异常高（比如 50+ 次/秒），大概率是响应式依赖过宽或事件未节流
查 Components 面板确认依赖是否失控
在 Components 标签页选中可疑组件，右侧打开 Reactivity Dependencies：
• 如果列出几十甚至上百个字段，尤其包含深层嵌套对象（如 user.profile.address.city），说明模板或 computed 过度监听了无关数据
• 若依赖列表里频繁出现同一个 ref 或 reactive 对象的多个属性，考虑改用 shallowRef 或 markRaw 跳过响应式追踪
• 检查是否有在 v-for 中直接调用函数（如 {{ format(item) }}），这会让每次渲染都新建闭包并触发新依赖
立即学习“前端免费学习笔记（深入）”；
审 setup 逻辑：常见副作用陷阱
打开组件源码，重点关注以下写法：
• watch 未节流：监听 input、scroll、mousemove 等高频事件源时，没加 { immediate: false, flush: 'post' } 或防抖封装
• computed 里做重操作：比如在 computed 中遍历上千条数据、调用复杂算法、或发起请求
• 闭包捕获旧状态：useCallback / watch 依赖数组漏写、写错，导致副作用函数始终读取过期值，反复执行无效更新
• 未清理副作用：在 onBeforeUnmount 或 deactivated 中没清除定时器、事件监听、WebSocket，这些残留 effect 会持续触发更新
验证与收口：用最小改动确认根因
不要一上来就重构，先做轻量验证：
• 在疑似副作用函数开头加 console.time('xxx')，结尾加 console.timeEnd('xxx')，对比实际执行频次
• 临时把 watch 或 computed 注释掉，看卡顿是否消失；若消失，再逐行放开确认具体哪一行触发了连锁更新
• 对疑似大数据源，用 markRaw 包一层再传入组件，如果卡顿缓解，说明是响应式劫持开销过大
• 改用 shallowRef 替代 ref 存储大型只读对象，避免深度代理带来的依赖收集膨胀
