Vue Lifecycle Hooks
Lifecycle hooks in Vue are used to run code at different stages of the Vue application's lifecycle.
Lifecycle Hook | Description |
---|---|
beforeCreate | happens before all the other lifecycle hooks |
created | the component is initialized, and we can access component instance properties |
beforeMount | the component is not mounted yet, so we can not access DOM elements |
mounted | the component is mounted to the DOM tree, so we can access DOM elements |
beforeUpdate | happens when Vue's reactive system has detected a change that requires a new rendering |
updated | happens right after the DOM tree has updated |
beforeUnmount | happens just before a component is removed from the DOM |
unmounted | happens after a component is removed from the DOM |
errorCaptured | happens when an error happens in a child/descendant component |
renderTracked | happens when a render function is set to track, or monitor, a reactive component |
renderTriggered | happens when there is a change in a tracked reactive component, so that a new render is triggered |
activated | happens when a cached dynamic component is added (but is already in the DOM) |
deactivated | happens when a cached dynamic component is removed (but not from the DOM) |
serverPrefetch | happens during server-side rendering (SSR) |