Search⌘ K
Home
Courses
Vue - The Road to Enterprise

Performance Option, renderTriggered, and renderTracked

Explore how to enable Vue's performance option to trace component lifecycle events. Understand how the renderTracked and renderTriggered hooks help identify reactive data updates triggering rerenders. Learn debugging tips like cloning reactive objects to avoid misleading logs, and discover their Composition API equivalents for performance optimization.

We'll cover the following...

Performance option

If we want to examine our application’s performance, we can enable component init, compile, render and patch performance tracing by enabling the performance config.

This option is available in both Vue 2 and Vue 3 and can be enabled, as shown below.

Vue2
Vue3
Vue.config.performance = true
Enabling the performance config in Vue 2

The renderTriggered and renderTracked hooks

Vue 3 offers two new lifecycle hooks called renderTriggered and renderTracked. These can be used while debugging ...