YouTipVue3 Api App Config Performance
# Vue3 app.config.performance Property
* * Vue3 Global API](#)
`app.config.performance` is a very useful configuration property that allows developers to enable or disable performance tracking.
`app.config.performance` is a global configuration option in Vue 3 that controls whether to enable performance tracking. By default, this property is disabled (`false`). When set to `true`, Vue will track component rendering performance in development mode and output relevant performance data to the browser's developer tools.
* * *
## How to enable app.config.performance?
Enabling `app.config.performance` is very simple. You can configure it when creating the Vue application instance:
## Example
import{ createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// Enable performance tracking
app.config.performance=true;
app.mount('#app');
In the above code, we set `app.config.performance` to `true` to enable the performance tracking feature.
* * *
## What does performance tracking do?
When performance tracking is enabled, Vue will record the following key performance metrics in development mode:
1. **Component rendering time**: Vue will record the rendering time for each component, including initial rendering and update rendering.
2. **Lifecycle hook execution time**: Vue will record the execution time of various lifecycle hooks (such as `mounted`, `updated`, etc.).
3. **Virtual DOM operations**: Vue will record the time for creating, updating, and destroying virtual DOM operations.
These performance data will help you better understand the performance bottlenecks of your application, thus enabling optimization.
* * *
## Use cases
`app.config.performance` is very useful in the following scenarios:
1. **Performance optimization**: When you find that the application runs slowly in certain situations, you can use performance tracking to identify which specific components or operations are causing the performance issues.
2. **Debugging complex components**: When dealing with complex components, performance tracking can help you understand the execution of various lifecycle hooks, thus better facilitating debugging.