ReactJs

What are all the life cycle hooks in Vue instance?

Kartic2 min read

Each Vue instance goes through series of steps when they are created, mounted and destroyed. Along the way, it will also runs functions called life cycle hooks, giving us the opportunity to add our own code at specific stage. Below are the events, a Vue instance goes through.

  • beforeCreate — The first hook in the creation hooks. They allow us to perform actions before our component has even been added to the DOM. We do not have access to the DOM inside of this.
  • created — This hook can be used to run code after an instance is created. We can access the reactive data. But templates and Virtual DOM have not yet been mounted or rendered.
  • beforeMount — The beforeMount hook runs right before the initial render happens and after the template or render functions have been compiled. Most likely we’ll never need to use this hook.
  • mounted — We will have full access to the reactive component, templates, and rendered DOM. This is the most frequently used hook.
  • beforeUpdate — This hook runs after data changes on our component and the update cycle begins. But runs right before the DOM is patched and re-rendered.
  • updated — This hook runs after data changes on our component and the DOM re-renders. If we need to access the DOM after a property change, here is probably the safest place to do it.
  • beforeDestroy — This hook will run right before tearing down the instance. If we need to clean up events or reactive subscriptions, this is the right place to do it.
  • destroyed — This hook will be used to do any last minute clean up.
Share this articleLinkedIn X

Discussion (0)

Sign in to join the discussion.

Delete this comment?

This will also remove its replies.

Keep exploring

ReactJs1 min read

Difference between ReactJs and Next Js

React.js and Next.js are both JavaScript libraries/frameworks used for building user interfaces, particularly for web applications. While they share some similarities, they serve d...

Kartic · Feb 20, 2024
ReactJs1 min read

Different types of componet in react js

What is component? In React, a component is a piece of reusable code that represents a part of a user interface. Components are used to render, manage, and update the UI elements i...

Kartic · Oct 25, 2022

Follow the engineering notes.

Subscribe for technical articles from iTechOrbit.