Lifecycle hooks allow you to hook into different stages of a component’s lifecycle.
All lifecycle hooks are automatically bound to the current active instance, so you can access component state, computed properties, and methods.
Type Signature
type CreateHook<T = () => any> = (
hook: T,
target?: ComponentInternalInstance | null
) => void
Registration
Lifecycle hooks should be registered synchronously during setup() or <script setup>:
<script setup>
import { onMounted, onUpdated } from 'vue'
onMounted(() => {
console.log('Component is mounted')
})
onUpdated(() => {
console.log('Component updated')
})
</script>
If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
onBeforeMount()
Called right before the component is to be mounted.
Type Signature:
function onBeforeMount(
hook: () => void,
target?: ComponentInternalInstance | null
): void
Example
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
console.log('About to mount')
})
Timing
- Called after
setup() completes
- Called before the initial render
- Component’s reactive state is set up
- DOM has not been created yet
onMounted()
Called after the component has been mounted.
Type Signature:
function onMounted(
hook: () => void,
target?: ComponentInternalInstance | null
): void
Example
import { ref, onMounted } from 'vue'
const el = ref()
onMounted(() => {
console.log('Mounted!')
console.log(el.value) // DOM element
})
Timing
- Called after:
- All synchronous child components have been mounted
- Its own DOM tree has been created and inserted into the parent container
- Use this hook to:
- Access DOM elements
- Initialize third-party libraries
- Start data fetching
This hook is not called during server-side rendering.
onBeforeUpdate()
Called right before the component is about to update its DOM tree due to a reactive state change.
Type Signature:
function onBeforeUpdate(
hook: () => void,
target?: ComponentInternalInstance | null
): void
Example
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
// Access DOM before update
console.log('DOM before update:', el.value.textContent)
})
Use Cases
- Access DOM state before Vue updates it
- Useful for removing manually added event listeners
This hook is not called during server-side rendering.
onUpdated()
Called after the component has updated its DOM tree due to a reactive state change.
Type Signature:
function onUpdated(
hook: () => void,
target?: ComponentInternalInstance | null
): void
Example
import { onUpdated } from 'vue'
onUpdated(() => {
// Access updated DOM
console.log('DOM updated:', el.value.textContent)
})
Timing
- Called after any DOM update caused by reactive state changes
- Parent component’s
onUpdated is called after child components
Do not mutate component state in onUpdated() - this can lead to infinite update loops. Use a computed property or watcher instead.
This hook is not called during server-side rendering.
onBeforeUnmount()
Called right before a component instance is to be unmounted.
Type Signature:
function onBeforeUnmount(
hook: () => void,
target?: ComponentInternalInstance | null
): void
Example
import { onBeforeUnmount } from 'vue'
onBeforeUnmount(() => {
console.log('About to unmount')
// Component is still fully functional
})
Timing
- Component instance is still fully functional
- Good place to clean up manually created side effects like timers or server connections
This hook is not called during server-side rendering.
onUnmounted()
Called after the component has been unmounted.
Type Signature:
function onUnmounted(
hook: () => void,
target?: ComponentInternalInstance | null
): void
Example
import { onUnmounted } from 'vue'
onUnmounted(() => {
console.log('Unmounted!')
})
Timing
- Called after:
- All child components have been unmounted
- All associated reactive effects have been stopped
Use Cases
- Clean up timers
- Cancel network requests
- Remove event listeners
- Tear down integrations
This hook is not called during server-side rendering.
onActivated()
Called when a kept-alive component instance is activated (inserted into the DOM).
Type Signature:
function onActivated(
hook: () => void,
target?: ComponentInternalInstance | null
): void
Example
<script setup>
import { onActivated } from 'vue'
onActivated(() => {
console.log('Component activated')
// Refresh data, restart timers, etc.
})
</script>
Only applies to components wrapped in <KeepAlive>.
onDeactivated()
Called when a kept-alive component instance is deactivated (removed from the DOM).
Type Signature:
function onDeactivated(
hook: () => void,
target?: ComponentInternalInstance | null
): void
Example
<script setup>
import { onDeactivated } from 'vue'
onDeactivated(() => {
console.log('Component deactivated')
// Pause operations, clean up resources, etc.
})
</script>
Only applies to components wrapped in <KeepAlive>.
onErrorCaptured()
Called when an error propagating from a descendant component has been captured.
Type Signature:
function onErrorCaptured<TError = Error>(
hook: ErrorCapturedHook<TError>,
target?: ComponentInternalInstance | null
): void
type ErrorCapturedHook<TError = unknown> = (
err: TError,
instance: ComponentPublicInstance | null,
info: string
) => boolean | void
Parameters
instance
ComponentPublicInstance | null
The component instance that triggered the error
A string specifying the error source type
Example
import { onErrorCaptured } from 'vue'
onErrorCaptured((err, instance, info) => {
console.error('Error captured:', err)
console.log('From component:', instance)
console.log('Error info:', info)
// Return false to prevent error from propagating further
return false
})
Error Sources
- Component renders
- Event handlers
- Lifecycle hooks
setup() function- Watchers
- Custom directive hooks
- Transition hooks
Return Value
- Return
false to stop the error from propagating further
- By default, errors propagate to
app.config.errorHandler
onRenderTracked()
Called when a reactive dependency has been tracked by the component’s render effect.
Type Signature:
function onRenderTracked(
hook: DebuggerHook,
target?: ComponentInternalInstance | null
): void
type DebuggerHook = (e: DebuggerEvent) => void
Example
import { onRenderTracked } from 'vue'
onRenderTracked((e) => {
console.log('Tracked:', e)
// { effect, target, type, key }
})
This hook is development-only and not called during server-side rendering.
onRenderTriggered()
Called when a reactive dependency triggers the component’s render effect to re-run.
Type Signature:
function onRenderTriggered(
hook: DebuggerHook,
target?: ComponentInternalInstance | null
): void
type DebuggerHook = (e: DebuggerEvent) => void
Example
import { onRenderTriggered } from 'vue'
onRenderTriggered((e) => {
console.log('Triggered:', e)
// { effect, target, type, key, newValue, oldValue }
})
This hook is development-only and not called during server-side rendering.
onServerPrefetch()
Registers an async function to be resolved before the component instance is rendered on the server.
Type Signature:
function onServerPrefetch(
hook: () => Promise<any>,
target?: ComponentInternalInstance | null
): void
Example
import { ref, onServerPrefetch } from 'vue'
const data = ref(null)
onServerPrefetch(async () => {
// Fetch data before rendering on server
data.value = await fetchData()
})
Use Cases
- Pre-fetch data during SSR
- Perform async operations before server rendering
- The returned promise will be awaited before rendering
This hook is only called during server-side rendering.
