Composition API lifecycle hooks must be called during setup()
All Composition API lifecycle hook functions must be called synchronously during the setup() phase of a component.
components: lifecycle
16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
onMounted() hook signature and behavior
onMounted(callback: () => void, target?: ComponentInternalInstance | null): void. Registers a callback to be called after the component has been mounted. A component is considered mounted after all its synchronous child components have been mounted (does not include async components or components inside <Suspense> trees) and its own DOM tree has been created and inserted into the parent container. The hook is typically used for side effects that need access to the component's rendered DOM, or for limiting DOM-related code to the client in server-rendered applications. This hook is not called during server-side rendering.
onMounted() example with template ref
import { ref, onMounted } from 'vue' const el = ref() onMounted(() => { el.value // <div> }) // In template: <div ref="el"></div>
onUpdated() hook signature and behavior
onUpdated(callback: () => void, target?: ComponentInternalInstance | null): void. Registers a callback to be called after the component has updated its DOM tree due to a reactive state change. A parent component's updated hook is called after that of its child components. This hook is called after any DOM update of the component, which can be caused by different state changes. Multiple state changes can be batched into a single render cycle for performance reasons. If you need to access the updated DOM after a specific state change, use nextTick() instead. This hook is not called during server-side rendering. Do not mutate component state in the updated hook as this will likely lead to an infinite update loop.
onUpdated() example
import { ref, onUpdated } from 'vue' const count = ref(0) onUpdated(() => { // text content should be the same as current `count.value` console.log(document.getElementById('count').textContent) }) // In template: <button id="count" @click="count++">{{ count }}</button>
onUnmounted() hook signature and behavior
onUnmounted(callback: () => void, target?: ComponentInternalInstance | null): void. Registers a callback to be called after the component has been unmounted. A component is considered unmounted after all its child components have been unmounted and all its associated reactive effects (render effect and computed / watchers created during setup()) have been stopped. Use this hook to clean up manually created side effects such as timers, DOM event listeners or server connections. This hook is not called during server-side rendering.
onUnmounted() example with cleanup
import { onMounted, onUnmounted } from 'vue' let intervalId onMounted(() => { intervalId = setInterval(() => { // ... }) }) onUnmounted(() => clearInterval(intervalId))
onBeforeUpdate() hook signature and behavior
onBeforeUpdate(callback: () => void, target?: ComponentInternalInstance | null): void. Registers a hook to be called right before the component is about to update its DOM tree due to a reactive state change. This hook can be used to access the DOM state before Vue updates the DOM. It is also safe to modify component state inside this hook. This hook is not called during server-side rendering.
onBeforeUnmount() hook signature and behavior
onBeforeUnmount(callback: () => void, target?: ComponentInternalInstance | null): void. Registers a hook to be called right before a component instance is to be unmounted. When this hook is called, the component instance is still fully functional. This hook is not called during server-side rendering.
onErrorCaptured() hook signature and behavior
onErrorCaptured(callback: ErrorCapturedHook): void. Type ErrorCapturedHook = (err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void. Registers a hook to be called when an error propagating from a descendant component has been captured. Errors can be captured from: component renders, event handlers, lifecycle hooks, setup() function, watchers, custom directive hooks, and transition hooks. The hook receives three arguments: the error, the component instance that triggered the error, and an information string specifying the error source type. In production, the 3rd argument (info) will be a shortened code instead of the full information string. You can modify component state in onErrorCaptured() to display an error state to the user, but the error state should not render the original content that caused the error, otherwise the component will be thrown into an infinite render loop. The hook can return false to stop the error from propagating further.
onErrorCaptured() error propagation rules
By default, all errors are still sent to the application-level app.config.errorHandler if it is defined, so that these errors can still be reported to an analytics service in a single place. If multiple errorCaptured hooks exist on a component's inheritance chain or parent chain, all of them will be invoked on the same error, in the order of bottom to top, similar to the bubbling mechanism of native DOM events. If the errorCaptured hook itself throws an error, both this error and the original captured error are sent to app.config.errorHandler. An errorCaptured hook can return false to prevent the error from propagating further, which essentially says the error has been handled and should be ignored, preventing any additional errorCaptured hooks or app.config.errorHandler from being invoked for this error.
onRenderTriggered() debug hook signature
onRenderTriggered(callback: DebuggerHook): void. Type DebuggerHook = (e: DebuggerEvent) => void. Type DebuggerEvent = { effect: ReactiveEffect, target: object, type: TriggerOpTypes (values: 'set' | 'add' | 'delete' | 'clear'), key: any, newValue?: any, oldValue?: any, oldTarget?: Map<any, any> | Set<any> }. Registers a debug hook to be called when a reactive dependency triggers the component's render effect to be re-run. This hook is development-mode-only and not called during server-side rendering.
onDeactivated() hook signature and behavior
onDeactivated(callback: () => void, target?: ComponentInternalInstance | null): void. Registers a callback to be called after the component instance is removed from the DOM as part of a tree cached by <KeepAlive>. This hook is not called during server-side rendering.
onServerPrefetch() hook signature and behavior
onServerPrefetch(callback: () => Promise<any>): void. Registers an async function to be resolved before the component instance is to be rendered on the server. If the callback returns a Promise, the server renderer will wait until the Promise is resolved before rendering the component. This hook is only called during server-side rendering and can be used to perform server-only data fetching.
onServerPrefetch() example
import { ref, onServerPrefetch, onMounted } from 'vue' const data = ref(null) onServerPrefetch(async () => { // component is rendered as part of the initial request // pre-fetch data on server as it is faster than on the client data.value = await fetchOnServer(/* ... */) }) onMounted(async () => { if (!data.value) { // if data is null on mount, it means the component // is dynamically rendered on the client. Perform a // client-side fetch instead. data.value = await fetchOnClient(/* ... */) } })
Lifecycle hooks execution order in Composition API
In Composition API, the lifecycle execution order is: setup() is called first (synchronously), then onBeforeMount(), then the component is mounted, then onMounted(), then for updates onBeforeUpdate() is called before DOM updates and onUpdated() is called after DOM updates, then for unmounting onBeforeUnmount() is called before unmounting and onUnmounted() is called after unmounting.