Life cycle hooks in Vue
Lets see what are the Life cycle hooks Available in Vue JS
Vue instance goes through a series of initialization steps when it’s created.It needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called life cycle hooks.
In Vue we have 8 life cycle hooks.
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
Let see with simple example
- BeforeCreate:
The beforeCreate hook runs at the very initialization of your component. data has not been made reactive, and events have not been set up yet.
We cannot access DOM or this.$el target mounting element inside before creation hooks.Creation hooks are the very first hooks that run in your component. They allow you to perform actions before your component has even been added to the DOM. Unlike any of the other hooks, creation hooks are also run during server-side rendering.
2. Created:
You are able to access reactive data and events that are active with the created hook. Templates and Virtual DOM have not yet been mounted or rendered.
3. BeforeMount (DOM insertions):
Mounting hooks are often the most used hooks. They allow you to access your component immediately before and after the first render.Use mounting hooks if you need to access or modify the DOM of your component immediately before or after the initial render.
Do not use mounting hooks if you need to fetch some data for your component on initialization.
Ex: If we try to print $this.el it is going to show undefined because this is not yet created.
4. Mounted:
In the mounted hook, you will have full access to the reactive component, templates, and rendered DOM (via this.$el).
5. BeforeUpdate:
Updating hooks are called whenever a reactive property used by your component changes or something else causes it to re-render. They allow you to hook into the watch-compute-render cycle for your component.
The beforeUpdate hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered.
console.log(‘This beforeUpdate cycle hook →’, Number(this.$el.textContent) === this.count, this.$el.textContent, this.count);
The result of this would be This beforeUpdate cycle hook → false ,0,1
6. Updated :
The updated hook runs after data changes on your component and the DOM re-renders.
console.log(‘This Update cycle hook →’, Number(this.$el.textContent) === this.count, this.$el.textContent, this.count);
The result of this would be This Update cycle hook → true,1,1
7. Destruction Hooks (beforeDestroy/beforeUnmount) :
Before used beforeDestroy hooks but now it is destroyed and instead of it use beforeUnmount.
beforeUnmount is fired right before teardown. Your component will still be fully present and functional.
8. Destroy/unmount:
By the time you reach the destroyed hook, there’s practically nothing left on your component. Everything that was attached to it has been destroyed.
Hope you got what are different types of Life cycle hooks available in Vue Js
