Vue 3 Lifecycle hooks Explained
Want to build enterprise-ready applications in Vue? Learn hooks.
Lifecycle hooks in Vue are one of the most important concepts to learn in Vue.js.
The hooks in Vue 2 and Vue 3 work similarly when using the Options API in Vue 3. However, when using Composition API, you will face some changes and the addition of more lifecycle hooks which makes it useful for building larger-scale and enterprise applications in Vue.
In this article, you will learn the different lifecycle hooks in Vue 3, how to use them, and how to integrate them into your enterprise application.
Overview of Vue 3 Lifecycle Hooks
A lifecycle hook is a special function that allows developers to hook into or create custom functionality at any specific moment, before, or after a particular event occurs.
Vue.js lifecycle hooks are divided into 6 main hooks which are further split into 12 hooks. Below are the 6 main events:
Let’s explore each of the events and learn the hooks that are categorized under each event.
Creation Hooks
The creation event runs on your component’s creation. It is mostly used to set up your newly created component.
Under the creation event, you have hooks such as:
beforeCreate
The beforeCreate
hook is called before initializing all of the reactive data and events. This makes the beforeCreate
event not have access to any of the component's reactive data and events.
Here’s a code snippet showing how to implement the beforeCreate
hook in the Options API.
export default {
data() {
return {
val: "hello",
};
},
beforeCreate() {
console.log("Value of val is: " + this.val);
},
};
In Options API, the beforeCreate
hook is very important and is useful when you want to call out API or logic that initializes data or does not need to assign data
created
The created
hook is responsible for initializing all of the reactive data and events. In the created
hook, we now have access to the component's data and events since they have been initialized.
Here’s a code snippet that shows how to implement created
hook in Options API:
export default {
data() {
return {
val: "hello",
};
},
created() {
console.log("Value of val is: " + this.val);
},
};
The created
hook is also useful for initialization or calling APIs or logic that needs to be called once before the component is mounted and most important the created
hook can assign data which makes it important to generate your initial data for your component.
In Vue 3 Composition API, the beforeCreate
and created
hooks are replaced with the setup
method itself. This means that your code will automatically be executed in composition API without explicitly calling it inside the beforeCreate
or created
hook.
Here’s a code snippet showing how to explicitly call a function or snippet of code in the setup method without using the beforeCreate
or created
hooks in Vue 3 composition API:
<script>
import { ref } from 'vue'
export default {
setup() {
const val = ref('hello')
// This will be called automatically by default
console.log('Value of val is: ' + this.val)
}
}
</script>
The same goes for using the compile-time syntactic sugar <script setup>
. Here's an example:
<script setup>
const val = ref('hello') // This will be called automatically by default
console.log('Value of val is: ' + this.val)
</script>
Now, you can easily create and call your functions directly without worrying if you have called them inside the created
or beforeCreated
hook.
Mounting Hooks
Mounting hooks handle mounting and rendering the component, there are important hooks in this category because they are responsible for the visibility of elements in your web pages. Below are some of the most commonly used hooks in applications.
- onMounted
- onBeforeMount
- onActivated
onMounted
The onMounted
hook is the same as the mounted
hook in Options API except for the name change and ways of using the onMounted
hook within Composition API.
Below is a code snippet that shows how to use onMounted
hook in composition API.
<script setup>
import { ref, onMounted } from 'vue'
const el = ref()
onMounted(() => {
el.value // <div>
})
</script>
<template>
<div ref="el"></div>
</template>
There are a few caveats about using the onMounted
hook such as:
- It can’t be used inside Async Components or components inside
<Suspense>
trees - It cannot be used inside or during server-side rendering.
- It must be called with a direct parent or a child container that is directly linked to the parent container.
The onMounted
hook is used to perform side effects that need access to the component's rendered DOM. This makes it useful for calling and updating business logic after all the elements and components are completely mounted and rendered.
onBeforeMounted
The onBeforeMounted
hook is a special hook that is called right before the component is mounted. One important thing to note is that, when this hook is called, the component has already finished setting up its reactive state.
This means that data from your state, ref
, reactive
are already initialized but no DOM has been rendered to the user yet.
Here’s an example of how to use onBeforeMounted
hook:
<script setup>
import { ref, onBeforeMounted } from 'vue'
onBeforeMounted(() => {
console.log('Before Mounted Hook')
})
</script>
<template>
<div ref="el"></div>
</template>
Updating Hooks
This category of hooks is during, before, or after a component update. There are important hooks in this category because they are responsible for the re-rendering of elements in your web pages.
Below are some of the most commonly used hooks in applications:
- onBeforeUpdate
- onUpdated
- onActivated
onBeforeUpdate
The onBeforeUpdate
hook is called right before the component is about to update or re-render its DOM tree due to changes or updates from a reactive state.
When working with Vue, you can update reactive data and see the update immediately in real time. That’s the sweet thing about reactivity in general, however, the onBeforeUpdate
is called before the component is updated with the new value.
Here’s an example of how to use onBeforeUpdate
hook:
<script setup>
import { ref, onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
console.log('Before Updated Hook')
})
</script>
<template>
<div ref="el"></div>
</template>
onUpdated
The onUpdated
hook is special and frequently used because it's called right after the component updates or re-renders the DOM tree due to changes or updates from a reactive state.
Here’s an example of how to use onUpdated
hook:
<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
console.log(document.getElementById('count').textContent)
})
</script>
<template>
<button id="count" @click="count++"></button>
</template>
This is a simple number increment app. It increases the number when a button is clicked and used the onUpdated
hook to log the value of the count
element.
If you have a parent-child component structure, the child onUpdated
hook is called before that of the parent updated hook.
Sometimes you might want to access the element that causes the update since you might have multiple elements updating at the same time. You can use the nextTick()
utility to access the specific element.
It is also important to note that you can easily run into an infinite loop if you mutate the state inside the onUpdated
hook.
onActivated
The onActivated
hook is a new addition in Vue 3. It is very special and helps in increasing performance with Vue components.
It is called after a component instance is inserted back into the DOM tree from a cache. Vue caches components when you use the KeepAlive tag as shown below:
<KeepAlive>
<component :is="view"></component>
</KeepAlive>
Any component that is cached as shown goes into the deactivated state when the component instance is removed from the DOM instead of completely destroying the component and remounting later, the component is pulled out from the cache and activated.
Here’s an example of how to use onActivated
hook:
<script setup>
import {onActivated} from 'vue' onActivated(() =>{" "}
{console.log("Activated hook is called")})
</script>
Debugging Hooks
The hooks in the debugging category are relatively new to Vue and some are called only on development.
The debugging hooks house different hooks that allow Vue developers to debug and capture errors in real time during development and production.
Below are some of the most commonly used hooks under the debugging category:
- onErrorCaptured
- onRenderTracked
- onRenderTriggered
onErrorCaptured
This is a very important hook used to capture errors within a component in real time. You can capture the following errors:
- Component renders
- Event handlers
- Lifecycle hooks
setup()
function- Watchers
- Custom directive hooks
- Transition hooks
Here’s an example of how to use onErrorCaptured
hook:
<script setup>
import { ref, onBeforeUpdate } from 'vue'
// Added onErrorCaptured lifecycle hook
onErrorCaptured((error) => {
// You can process the error here
console.log(error)
return true;
});
</script>
onRenderTracked
The onRenderTracked
hook is a debugging hook that gets called every time a reactive dependency is tracked. Here's an example of how to use the onRenderTracked
hook for debugging.
<script setup>
import {(ref, onRenderTracked)} from 'vue' const num = ref(0) const num2 =
ref(0) // It will be called twice, once for num and once for num2
onRenderTracked((event) => {console.log(event)})
</script>
It is important to note that this hook should only be used in development and not in production.
The onRenderTriggered
hook is also a debugging hook that gets called when a reactive dependency is updated. Here's an example of how to use the onRenderTriggered
hook for debugging.
<script setup>
import {(ref, onRenderTracked)} from 'vue' const num = ref(0) // It will be
called once the num is updated onRenderTriggered((event) =>{" "}
{console.log(event)})
</script>
It is important to note that this hook should only be used in development and not in production.
Server-side hooks
The hooks in the server-side category are relatively new to Vue and it houses hooks that are called before or after a component is rendered on the server-side.
As of the time of writing, Vue only has one hook that falls under this category:
The onServerPrefetch
hook is a server-side hook that gets called before the component instance is to be rendered on the server. This hook is perfect when performing server-only data fetching since it is only called during server-side rendering.
Here’s an example of how to use the onServerPrefetch
hook for server-side logic:
<script setup>
import {(ref, onServerPrefetch)} from 'vue' const data = ref(null)
onServerPrefetch(async () =>{" "}
{
// pre-fetch data on server as it is faster than on the client
(data.value = await fetchOnServer(/* ... */))
}
)
</script>
Also, note that if the callback returns a Promise, the server renderer will wait until the Promise is resolved before rendering the component.
Destruction
The destruction hooks are used for the removal of components, cleaning up components, deactivating components, or event listeners to avoid memory leaks. The destruction category contains a lot of hooks and some opposite of the ones we have covered earlier.
- onUnmounted
- onBeforeUnmount
- onDeactivated
The onUnmounted
hook is called after the component has been unmounted. It is used to clean up manually created side effects such as timers, DOM event listeners, or server connections. Here's an example of onUnmounted
hook
<script setup>
import {onUnmounted} from 'vue' let intervalId onMounted(() =>{" "}
{
(intervalId = setInterval(() => {
// ...
}))
}
) onUnmounted(() => clearInterval(intervalId))
</script>
In the code snippet above, we created a timer using the onMounted
hook and clear the timer using the onUnmounted
hook.
onBeforeUnmount
The onBeforeUnmount
hook is the opposite of onBeforeMount
hook. It is called right before a component instance is to be unmounted. Here's an example of onBeforeUnmounted
hook:
<script setup>
import {onUnmounted} from 'vue' let intervalId onBeforeMount(() =>{" "}
{
(intervalId = setInterval(() => {
// ...
}))
}
) onBeforeUnmount(() => clearInterval(intervalId))
</script>
In the code snippet above, we created a timer using the onBeforeMount
hook and clear the timer using the onBeforeUnmount
hook.
onDeactivated
The onDeactivated
hook is the opposite of onActivated
hook discussed earlier. It is called after the component instance is removed from the DOM as part of a tree cached by the KeepAlive tag.
Here’s an example of onDeactivated
hook:
<script setup>
import {onDeactivated} from 'vue' onDeactivated(() =>{" "}
{console.log("Deactivated hook is called")})
</script>
Final words
“Vue 3 Lifecycle Hooks Explained” is an article that provides an overview of the different lifecycle hooks in Vue 3 and how to use them.
The article explains that lifecycle hooks are special functions in Vue that allow developers to hook into or create custom functionality at specific moments before or after events occur.
The hooks are categorized into six main events: Creation, Mounting, Updating, Debugging, Server-side, and Destruction.
Under the Creation event, the article explains two hooks: beforeCreate
and . The beforeCreate
hook is called before initializing reactive data and events, while the hook is responsible for initializing reactive data and events.
The Mounting event hooks are discussed next, including , onBeforeMount
, and onActivated
. The hook is used to perform side effects after the component is mounted and rendered, while the onBeforeMount
hook is called right before the component is mounted. The onActivated
hook is a new addition in Vue 3 and is called when a component instance is inserted back into the DOM tree from a cache.
The Updating event hooks cover onBeforeUpdate
, , and onActivated
. The onBeforeUpdate
hook is called before the component updates its DOM tree due to changes in the reactive state, while the hook is called after the component updates or re-renders the DOM tree. The onActivated
hook is called when a component instance is activated from a cache.
The article then discusses the Debugging hooks, which include onErrorCaptured
, onRenderTracked
, and onRenderTriggered
. These hooks are used for debugging and capturing errors during development and production.
The Server-side hooks category includes onServerPrefetch
, which is called before a component instance is rendered on the server. This hook is useful for server-only data fetching during server-side rendering.
Lastly, the Destruction event hooks cover onUnmounted
, onBeforeUnmount
, and onDeactivated
. The onUnmounted
hook is called after the component is unmounted and is used for cleaning up manually created side effects. The onBeforeUnmount
hook is called before the component is unmounted, and the onDeactivated
hook is called after the component is removed from the DOM as part of a cached tree.
Throughout the article, code snippets are provided to illustrate how to implement each hook using the Options API and the Composition API in Vue 3.
Originally published at https://enterprisevue.dev.