使用 Vue DevTools 性能面板进行性能分析
记录组件更新、识别不必要的重新渲染，以及分析组件耗时
使用 Vue DevTools 性能面板进行性能分析 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
为什么要进行性能分析
在优化之前，您必须知道时间花在了哪里。Vue DevTools 提供性能/时间线视图，可以记录组件渲染过程，让您找到浪费的工作，而不是凭猜测进行优化。
安装 Vue DevTools
请安装浏览器扩展，或运行独立应用。在 Vite 项目中，vite-plugin-vue-devtools 插件会添加应用内检查器。
npm install -D vite-plugin-vue-devtools开始录制
打开 DevTools 的时间线/性能标签页并点击录制，然后操作您的应用。停止录制后，就能捕获这段时间内的渲染活动。
组件渲染时间线
每次组件渲染都会作为一个事件显示在时间线上。您可以看到组件何时重新渲染，以及渲染耗时多久。
提交图
一次提交是对 DOM 更新进行的一次统一刷新。提交图会显示每次提交以及其中进行渲染的组件，帮助您发现影响的组件远超预期的提交。
组件耗时火焰图
火焰图会堆叠显示父组件和子组件的渲染耗时。宽条表示渲染缓慢，深层堆叠表示渲染如何沿组件树层层传递。
识别无效渲染
无效渲染是指组件重新渲染了，却产生了相同的输出。这些情况会显示为重复的渲染事件，而其结果并未改变 DOM。
输出相同，渲染却是新的
一个常见原因是每次渲染时都将新创建的对象或内联箭头函数作为属性传入，从而破坏了记忆化。即使子组件的可见输出完全相同，它仍然会重新渲染。
<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />使用稳定引用修复
将常量提升到外部，或将派生数据放入 computed 中包装，这样每次渲染传入的都是同一个引用。
const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));关联交互操作
时间线还会记录鼠标和键盘事件。将缓慢的提交与触发它的交互操作对齐，即可找到需要优化的确切代码路径。
组件检查器中的渲染次数
组件检查器可以在组件更新时高亮显示它们。观察计数器在每次无关的状态变化时闪烁，就能一眼发现过度渲染。
快速检查
性能选项卡中的提交图表示什么？
回顾
使用 Vue DevTools 的性能/时间线选项卡记录渲染过程。提交图显示每次 DOM 刷新及其渲染的组件，而火焰图则显示缓慢的渲染。请查找无效渲染——也就是输出没有变化却重新渲染的组件，这通常是由不稳定的属性引用造成的——并通过提升常量或使用 computed 来修复。
常见问题解答
「使用 Vue DevTools 性能面板进行性能分析」课时是免费的吗？
是的 — 「使用 Vue DevTools 性能面板进行性能分析」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「使用 Vue DevTools 性能面板进行性能分析」这节课中我会学到什么？
记录组件更新、识别不必要的重新渲染，以及分析组件耗时 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「使用 Vue DevTools 性能面板进行性能分析」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 v-memo 进行模板记忆化
- 使用 Vue DevTools 性能面板进行性能分析
- 大型列表的虚拟滚动
- 在 Vue 中使用 Web Worker