Today I strengthened my knowledge of Vue.js lifecycle hooks to be able to correctly unmount a component and stop any requests to the server that would be ongoing in the background. This is a situation I came across while building a file upload component in my Vuejs project, where I had to cancel the upload/s in case a user navigated away from the page.
It was a very important step to take care of as components or resources not cleaned up properly could have impacted the performance of the application, but also cause excessive memory usage both to the server and front-end.
Vue.js and many other front-end frameworks offer predefined methods that allow us to get hold of a specific phase of the component’s lifecycle. Some of the Vuejs hooks are beforeCreate, created (creation hooks), beforeMount, mounted (mounting hooks), beforeUpdate, updated (updating hooks), beforeUnmount, and unmounted (destruction hooks).
What are lifecycle hooks?
Vuejs lifecycle hooks are predefined methods that get executed in a certain order throughout the lifecycle of a component from the initialisation of that Vue instance to its destruction. The lifecycle hooks allow you to know when a component is created, added to the DOM, updated, or destroyed.
There are some differences in how to use the lifecycle hooks in Vue 3 Composition API vs. Option API. Creation hooks are the first thing that runs in our component, however in the Composition API both creation hooks are replaced by the setup() method. In the Options API, we have the beforeCreate and the created hooks. When using Options API we don’t have to import the lifecycle hooks, however, when using Composition API we have to import the hook before we can use it; this is to keep the project as lightweight as possible.
beforeCreate:
The beforeCreate hook runs at the initialisation of the component. It runs before we have any reactive elements or DOM elements. At this stage, we don’t have access to any data or events, and we can’t call component methods either.
As I was trying to find use cases for this lifecycle hook I tended to come across information suggesting that this hook is not extensively used. However, it can be useful when we need to make an API call that does not need to be assigned to data (as the assigned data would be lost once the state is initialised), or for actions that require low-level setup.
created:
This is the first hook that gives us access to our component's data and events. The DOM is yet to be mounted and rendered, and the $el property will not be available yet.
This is one of the most used lifecycle hooks and is a perfect place to fetch external data.
The hook is useful when we want to read/write the reactive data, for example making an API call and storing the response.
Mounting hooks
The mounting hooks run when the DOM is mounted, and they handle rendering the component. The hooks are commonly used in applications, as they allow us to access the component right before and after the first render.
beforeMount:
The beforeMount hook runs right before the component DOM is rendered and mounted, here the template and the scoped styles are compiled. The root element (this.$el) does not exist yet, so we can’t manipulate the DOM. It is important to note that this hook is not called during server-side rendering. The hook is useful for performing actions before the DOM is updated and should be the last stage to make API calls.
mounted:
In the mounted hook, we have access to the reactive components and rendered DOM. In the Options API, we can access the DOM via the ‘this.$el’, and in the Composition API we need to use refs. At this stage the app component in the project becomes functional and the data is fit into the template, so it can be manipulated. The mounted hook is commonly used to set up event listeners, modify the DOM, or fetch external data. It is important to note that this hook is not called during server-side rendering.
Updating hooks
The update hooks run when reactive data is modified.
beforeUpdate:
The beforeUpdate hook runs after data changes, but right before the DOM is patched and re-rendered. This is a good stage to update the DOM manually or for any logic before data changes, like removing event listeners. It is also safe to mutate the component state at this stage. Note that this hook does not run during server-side rendering.
updated:
The updated hook runs after data changes on your component and the DOM re-renders and updates. A parent component's updated hook runs after that of its child components. Avoid mutating component state during this hook as that would likely cause an infinite loop. You can access the updated DOM during this hook. Note that this hook is not called during server-side rendering.
Destruction hooks
The destruction hooks are used in the process of removing a component. They are great for clean-ups to avoid memory leaks, and sending analytics. Destruction hooks are not called during server-side rendering.
beforeUnmount:
The beforeUnmount is invoked right before teardown or destruction. At this stage, the component still completely exists and is fully functional, as it has not been destroyed yet. This hook is most used to clean up components, such as removing event listeners or clearing timeouts.
unmounted:
The destroyed hook is when everything part of the component has been torn down, or destroyed from existence. At this stage all associated reactive effects have been stopped, including render effects and computed watchers. This method is also useful for cleanup required within the component, such as stopping server connections.
The lifecycle hooks described above are the main Vue lifecycle hooks, but there are some additional ones. To learn about these, follow this link: https://vuejs.org/api/options-lifecycle.html
Top comments (0)