Learn about Lifecycle Hooks in Vue 3 Composition API.
In Vue 3, which lifecycle hook is triggered before the component's DOM is updated with reactive data?
What is the purpose of the setup function in Vue 3?
In Vue 3, which lifecycle hook is used to perform cleanup tasks before a component is unmounted and destroyed?
Vue 3 introduces a new hook called onErrorCaptured which helps capturing errors in a child component.
These errors can originate from event handlers, setup()
function, watchers or any lifecycle hooks of the child components.
Along with error, onErrorCaptured hook also provides a (child) component instance in a second argument where the error has originated from.
In Vue 3, which lifecycle hook is triggered when an error has occurred in a child component during rendering?
What is the replacement for the beforeDestroy
(of Vue 2) lifecycle hook in Vue 3?
Which lifecycle hook in Vue 3 is called when a component is updated and the virtual DOM has been re-rendered because of the reactive data changes?
Which lifecycle hook in Vue 3 is SSR only, and used for fetching data on server-side?
Which of the two lifecycle hooks are dev
only in Vue 3?
<component :is=””/>
is used to render Vue component dynamically. When <component>
is wrapped around with <KeepAlive>
, KeepAlive caches the inactive <component>
by keeping it alive, without un-mounting it.
In other words, dynamic component goes into deactivated state on unmount, and active state when mounted.
We can access these two states of the dynamic component using onActivated
and onDeactivated
lifecycle hooks. Remember, both hooks work for component cached by <KeepAlive>
.
Which of the two lifecycle hooks in Vue 3 are associated with DOM tree cached by <KeepAlive>
component?