Vue3 app.config.performance 属性
Vue3 的 app.config.performance 属性是开发者用来控制性能监控行为的一个配置项。在某些开发场景中，我们希望在应用运行时获取组件性能数据，比如组件加载、渲染、更新耗时等，这个配置就起到了开关的作用。
核心概念
app.config.performance 是一个布尔型配置，当设置为 true 时，Vue3 会在浏览器控制台中输出组件的性能信息。这些信息对于优化大型应用的渲染效率非常有帮助，尤其在使用 Vue DevTools 时。
- 开启后，控制台会显示组件的挂载、更新、卸载耗时
- 仅在开发环境生效，生产环境自动忽略
- 与 Vue DevTools 配合使用，可进行更精确的性能分析
基础语法
在 Vue3 的应用实例中，app.config.performance 的设置非常简单，只需在 createApp() 后的 app 对象中修改该属性即可。
开启性能监控
const app = createApp(App)
app.config.performance = true
将
performance设置为true，即可在浏览器控制台中看到性能日志。
关闭性能监控
const app = createApp(App)
app.config.performance = false
默认情况下，Vue3 的
performance是关闭的，除非你显式启用。
进阶特性
该配置与 Vue DevTools 配合使用时，能提供更丰富的性能分析功能。开发者可以在 DevTools 的性能面板中查看组件的详细性能图表和时间线。
| 特性 | 描述 |
|---|---|
| 控制台输出 | 开启后会在控制台打印组件性能信息 |
| DevTools 支持 | Vue3 DevTools 提供可视化性能分析界面 |
| 仅限开发环境 | 生产构建不会输出任何性能数据 |
| 自动检测 | Vue3 会根据当前环境自动启用或禁用性能监控 |
实战应用
在开发中，我们通常会在应用启动阶段配置 performance 属性。以下是一个完整的配置示例：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 开启性能监控
app.config.performance = true
app.mount('#app')
此配置在开发环境中生效，便于你监控组件的性能表现。
另一个场景是，如果你正在开发一个大型应用，想要找出某个组件的渲染瓶颈，可以在 performance 开启的情况下，运行应用并查看浏览器控制台中输出的组件性能数据。
常见问题
Q: app.config.performance 在生产环境会生效吗？
A: 不会。该属性仅在开发环境（process.env.NODE_ENV === 'development'）中起作用，生产环境下 Vue3 会自动忽略此配置。
Q: 打开后控制台没有输出任何信息，可能是什么原因？
A: 可能未安装 Vue3 的 DevTools 扩展，或者浏览器控制台过滤掉了日志。请确保 Vue3 DevTools 处于启用状态，并检查控制台过滤器。
Q: 为什么我看不到组件的性能信息？
A: 有些组件或场景不会触发完整的性能记录（如异步组件、条件渲染等）。确保组件在页面中被实际渲染，并且应用没有进行代码分割或懒加载的过度优化。
总结
Vue3 的 app.config.performance 属性是控制组件性能日志输出的重要开关，适合用于开发阶段的性能调优和分析。