Vue · all subjects

lifecycle

37 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

lifecycle hooks definition

A Vue component instance goes through a lifecycle: it is created, mounted, updated, and unmounted. Lifecycle hooks are a way to listen for these lifecycle events. With the Options API, each hook is provided as a separate option such as mounted. The Composition API uses functions instead, such as onMounted().

onUnmounted() use cases

onUnmounted() is used to clean up manually created side effects such as timers, DOM event listeners or server connections.

onRenderTracked() is development-mode-only

onRenderTracked() is development-mode-only and not called during server-side rendering.

onUnmounted() signature and type

onUnmounted(callback: () => void, target?: ComponentInternalInstance | null): void. It registers a callback to be called after the component has been unmounted.

onUnmounted() unmounting criteria

A component is considered unmounted after all of its child components have been unmounted and all of its associated reactive effects (render effect and computed / watchers created during setup()) have been stopped.

onMounted() signature and type

onMounted(callback: () => void, target?: ComponentInternalInstance | null): void. It registers a callback to be called after the component has been mounted.

onMounted() mounting criteria

A component is considered mounted after all of its synchronous child components have been mounted (not including async components or components inside Suspense trees) and its own DOM tree has been created and inserted into the parent container. It only guarantees the component's DOM tree is in-document if the application's root container is also in-document.

onMounted() is not called during SSR

onMounted() is not called during server-side rendering.

onMounted() use cases

onMounted() is typically used for performing side effects that need access to the component's rendered DOM, or for limiting DOM-related code to the client in a server-rendered application.

onUpdated() signature and type

onUpdated(callback: () => void, target?: ComponentInternalInstance | null): void. It registers a callback to be called after the component has updated its DOM tree due to a reactive state change.

onUpdated() parent and child order

A parent component's updated hook is called after that of its child components.

onUpdated() batching and state tracking

onUpdated() 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.

onUpdated() mutation warning

Do not mutate component state in the updated hook as this will likely lead to an infinite update loop.

onBeforeMount() state and DOM

When onBeforeMount() is called, the component has finished setting up its reactive state, but no DOM nodes have been created yet. It is about to execute its DOM render effect for the first time.

onBeforeMount() is not called during SSR

onBeforeMount() is not called during server-side rendering.

onBeforeUpdate() signature and type

onBeforeUpdate(callback: () => void, target?: ComponentInternalInstance | null): void. It registers a hook to be called right before the component is about to update its DOM tree due to a reactive state change.

onBeforeUpdate() DOM access and state mutation

onBeforeUpdate() can be used to access the DOM state before Vue updates the DOM. It is also safe to modify component state inside this hook.

onBeforeUpdate() is not called during SSR

onBeforeUpdate() is not called during server-side rendering.

onBeforeUnmount() signature and type

onBeforeUnmount(callback: () => void, target?: ComponentInternalInstance | null): void. It registers a hook to be called right before a component instance is to be unmounted.

onBeforeUnmount() component functionality

When onBeforeUnmount() is called, the component instance is still fully functional.

onBeforeUnmount() is not called during SSR

onBeforeUnmount() is not called during server-side rendering.

onRenderTracked() signature and type

onRenderTracked(callback: DebuggerHook): void where DebuggerHook = (e: DebuggerEvent) => void and DebuggerEvent = { effect: ReactiveEffect, target: object, type: TrackOpTypes, key: any }. TrackOpTypes is 'get' | 'has' | 'iterate'.

onRenderTracked() purpose

onRenderTracked() registers a debug hook to be called when a reactive dependency has been tracked by the component's render effect.

onRenderTriggered() signature and type

onRenderTriggered(callback: DebuggerHook): void where DebuggerHook = (e: DebuggerEvent) => void and DebuggerEvent = { effect: ReactiveEffect, target: object, type: TriggerOpTypes, key: any, newValue?: any, oldValue?: any, oldTarget?: Map<any, any> | Set<any> }. TriggerOpTypes is 'set' | 'add' | 'delete' | 'clear'.

onRenderTriggered() purpose

onRenderTriggered() registers a debug hook to be called when a reactive dependency triggers the component's render effect to be re-run.

onRenderTriggered() is development-mode-only

onRenderTriggered() is development-mode-only and not called during server-side rendering.

onDeactivated() signature and type

onDeactivated(callback: () => void, target?: ComponentInternalInstance | null): void. It registers a callback to be called after the component instance is removed from the DOM as part of a tree cached by KeepAlive.

onDeactivated() is not called during SSR

onDeactivated() is not called during server-side rendering.

onServerPrefetch() signature and type

onServerPrefetch(callback: () => Promise<any>): void. It registers an async function to be resolved before the component instance is to be rendered on the server.

onServerPrefetch() Promise handling

If the callback returns a Promise, the server renderer will wait until the Promise is resolved before rendering the component.

onServerPrefetch() is SSR only

onServerPrefetch() is only called during server-side rendering and can be used to perform server-only data fetching.

Composition API lifecycle hooks must be called synchronously during setup()

All lifecycle hook APIs must be called synchronously during the setup() phase of a component.

onMounted() example with template ref

```vue <script setup> import { ref, onMounted } from 'vue' const el = ref() onMounted(() => { el.value // <div> }) </script> <template> <div ref="el"></div> </template> ``` This example shows accessing an element via template ref in the onMounted hook.

onUpdated() example accessing updated DOM

```vue <script setup> 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) }) </script> <template> <button id="count" @click="count++">{{ count }}</button> </template> ``` This example shows accessing updated DOM in the onUpdated hook.

onUnmounted() example with timer cleanup

```vue <script setup> import { onMounted, onUnmounted } from 'vue' let intervalId onMounted(() => { intervalId = setInterval(() => { // ... }) }) onUnmounted(() => clearInterval(intervalId)) </script> ``` This example shows cleaning up a timer in the onUnmounted hook.

onServerPrefetch() example with data fetching

```vue <script setup> 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(/* ... */) } }) </script> ``` This example shows using onServerPrefetch for server-side data fetching and onMounted for client-side fallback.

Vue 2 end of life date

Vue 2 reached End of Life on December 31st, 2023. Vue 2.7, shipped in July 2022, is the final minor release of Vue 2. Vue 2 entered maintenance mode and no longer ships new features, but continues to receive critical bug fixes and security updates for 18 months from the 2.7 release date.

Give your agent this brain