Vue.js is a popular JavaScript framework for building web applications. It is designed to be easy to use and easy to understand, which makes it a favourite with beginners and experienced developers alike. One of the most important parts of Vue.js is its lifecycle hooks, which let you control what a component does as it is added to the component tree, updated and removed from it.
What is a Vue.js lifecycle hook?
A Vue.js lifecycle hook is a function called at specific points as a component is created, updated or destroyed. Lifecycle hooks let you define exactly what should happen at each stage of a component’s life: initialising variables, calling asynchronous methods, cleaning up resources.
The most commonly used lifecycle hooks
Vue.js has several lifecycle hooks, but these are the ones you will reach for most often:
setup: setup() runs before every other hook and is the entry point for the Composition API in a component, either without a build step or to bring Composition API code into an Options API component.created: called once the component has been created and its properties initialisedmounted: called when the component has been mounted on the page and its rendering is completeupdated: called when the component is updated with new datadestroyed: called when the component is destroyed and its resources cleaned up
How to use lifecycle hooks
Lifecycle hooks are easy to use in Vue.js. You declare one by adding a method to the options object of your Vue component. To run something when the component is mounted, for example, add this method to the options object:
mounted () {
// code to run when the component is mounted
}A lifecycle hooks example
Say you have a component that displays a list of posts fetched from an API. Lifecycle hooks let you do the following:
- In the
createdhook, call the API to fetch the posts - In the
mountedhook, render the posts on the page withv-for - In the
updatedhook, check whether the data has changed and call the API again if it has - In the
destroyedhook, clean up resources such as event subscriptions to avoid memory leaks.
Here is a concrete example of lifecycle hooks used to display a list of posts:
<template>
<div>
<ul>
<li v-for="article in articles" :key="article.id">{{ article.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
articles: []
}
},
created () {
this.fetchData()
},
methods: {
fetchData () {
// call the API to fetch the posts
}
},
updated () {
if (this.articles.length === 0) {
this.fetchData()
}
},
destroyed () {
// clean up resources here
}
}
</script>FAQ about Vue.js lifecycle hooks
In what order do Vue.js lifecycle hooks run?
The Vue 3 lifecycle hooks run in this order: beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed.
Can I use several lifecycle hooks in a single component?
Yes, you can use as many lifecycle hooks as you need in a single component. That is useful when you want to watch and control what a component does at different points in its life.
Are there lifecycle hooks that cannot be used together?
No, there is no restriction on combining lifecycle hooks. Some hooks, however, only make sense at certain stages: beforeDestroy, for instance, only runs after the component has been created and before it is destroyed.
Conclusion
Vue.js lifecycle hooks are a powerful tool when you want to control what your components do in response to different events. With them you can run specific actions at different points in a component’s life: initialising variables, calling asynchronous methods, cleaning up resources. Go through the various Vue.js lifecycle hooks yourself, it is a quick way to sharpen your development skills.
