Vue 'renderTracked' Lifecycle Hook
Example
Using the renderTracked lifecycle hook to create an alert when the reactive component is initialized.
export default {
data() {
return {
counter: 0
}
},
renderTracked(evt) {
console.log("renderTracked: ",evt);
alert("renderTracked");
}
}
Definition and Usage
The renderTracked hook runs when a render function is set to track, or monitor, a reactive component.
The renderTracked hook usually runs when a reactive component is initialized, because that is when the Vue's automatic reactive system is set up.
A reactive component is a component that changes.
A render function is a function compiled by Vue that keeps track of reactive components. When a reactive component changes, the render function is triggered and re-renders the application to the screen.
The renderTracked hook is meant to be used in debugging, and is only available in development mode.
Related Pages
Vue Tutorial: Vue Lifecycle Hooks
Vue Tutorial: The 'renderTracked' Hook
Vue Tutorial: The 'renderTriggered' Hook
Vue Reference: Vue 'renderTriggered' Lifecycle Hook