Vue 'renderTriggered' Lifecycle Hook
Example
Using the renderTriggered lifecycle hook to show an alert every time a render is triggered.
export default {
data() {
return {
counter: 0
}
},
renderTriggered(evt) {
console.log("renderTriggered: ",evt)
alert("renderTriggered");
}
}
Definition and Usage
The renderTriggered lifecycle hook runs when a tracked reactive component changes, and therefore triggers a new render, so that the screen gets updated with the latest changes.
The renderTriggered hook is meant to be used in debugging, and is only available in development mode.
A reactive component is a component that can change.
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.
Related Pages
Vue Tutorial: Vue Lifecycle Hooks
Vue Tutorial: The 'renderTriggered' Hook
Vue Tutorial: The 'renderTracked' Hook
Vue Reference: Vue 'renderTracked' Lifecycle Hook