Vue Devtools Performance面板仅提供组件级渲染耗时，无法显示函数内部执行细节；需结合performance.now()打点、Chrome Performance面板火焰图及Dependencies视图，定位computed深拷贝、setup大数据循环等具体瓶颈。
直接看 Vue Devtools 的 Performance 面板，能定位到组件级渲染耗时，但**它不显示函数内部执行细节**——比如某个 computed 里做了三次深拷贝、或 setup 中循环处理了 5000 条数据。要分析函数耗时，得结合原生 Performance API 和 Chrome 的 Performance 面板协同判断。
Vue Devtools Performance 面板只给“组件粒度”耗时
它记录的是组件的 render / update / setup 阶段整体时间，例如：
- 悬停色块看到 “MyList.vue — render: 42ms”，这表示整个 render 函数从调用到返回 vnode 花了 42ms
- 但不知道这 42ms 里，15ms 耗在 map 循环、8ms 耗在 formatTime() 调用、12ms 耗在响应式 getter 触发
- 如果组件用了
v-memo或shallowRef，面板可能显示耗时骤降，但原因藏在代码逻辑里，面板不解释
用 performance.now() 在关键函数打点
在怀疑慢的函数开头和结尾插入时间标记，最轻量、最直接：
- 在
computed或自定义方法里：const expensiveList = computed(() => { const start = performance.now() const result = heavyTransform(props.rawData) console.log('heavyTransform took', performance.now() - start, 'ms') return result }) - 在
setup或onMounted中对初始化逻辑测时：onMounted(() => { performance.mark('init-start') initChart() performance.mark('init-end') performance.measure('init-chart', 'init-start', 'init-end') }) - 结果直接出现在 Chrome 的 Performance 面板 > Timings 分类下，也可用
performance.getEntriesByType('measure')拿到数值
Chrome Performance 面板抓取函数级火焰图
这才是看“哪个函数真正吃 CPU”的地方：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Performance → 点录制 → 执行一次交互（如点击刷新按钮）→ 停止
- 在 Main 线程火焰图中，展开堆栈，找高亮长条：比如
patchKeyedChildren占 60ms，说明 diff 过程卡顿；出现大量get调用，大概率是深层响应式对象被频繁读取 - 右键某帧 → “Zoom to selection”，聚焦该段；再右键函数 → “Reveal in Editor”，可跳转到源码对应行（需 sourcemap 正常）
- 重点关注：重复出现的匿名函数、未 memo 化的数组操作、同步格式化函数（如
date-fns/format在循环内调用）
配合 Dependencies 视图验证响应式开销
函数慢，未必是逻辑问题，可能是响应式系统被拖累：
- 在 Vue Devtools 的 Components 面板选中目标组件 → 右侧切到 Dependencies 标签
- 看监听的依赖数量：如果一个只显示标题的组件列出了 200+ 个响应式字段，说明它被过度绑定（比如传入了整个 store.state 而非 select 出的字段）
- 依赖项里出现
state.user.profile.address.city这类深层路径，且组件并不真用 city，就属于无效追踪——应改用toRefs或解构 +shallowRef
