Vue.js – Lifecycle of a Vue Instance, Lifecycle Hooks

Tram Ho


Hello everyone, this time I have asked to learn about Vue to participate in the project. By the way, I wrote this article to share through some of the knowledge I learned about Vue. Specifically here about Vue – LifeCycle (life cycle) of an instance in Vue. Let’s get started !!

1. Lifecycle:

When approaching any framework, we all need to understand their Lifecycle , from application creation, application run or application termination. In Vue too, here is a diagram of the life cycle of an instance in Vue

The diagram above is the life cycle of an instance. As we can see, the Lifecycle of an instance is included

  • Initialize a Vue object
  • Bind to the DOM
  • Update DOM when data changes
  • Instance cancel.

2. Lifecycle Hooks

With the life cycle stages of a VueJS instance above, we will go into learning about the Lifecycle Hooks corresponding to each stage. So what are Lifecycle Hooks :

  • Lifecycle Hooks are methods that are executed at every stage of the Vue life cycle.
  • With the four phases mentioned above, the hooks: beforeCreate , created , beforeMount , mounted , beforeUpdate , updated , and beforeDestroy , destroyed respectively are used .

We will go into details of each hook in turn.

Initialization phase:

  • the beforeCreate hook runs every time an instance is instantiated. At this point, data, event has not been set.
  • created hook is run when the data, event has been successfully set.

The code below will describe these two function hooks

DOM consolidation stage:

  • The beforeMount hook will run after the data, the event has been established and before it is mounted to the DOM. In this hook we still haven’t – access to the element in the DOM.
  • mounted hook: This stage, mounted hook will allow us to have access to the element in the DOM. That is, DOM is mounted.

DOM update phase when data changes:

  • beforeUpdate hook: After the object has been attached to the DOM, when the data is changed, and before rendering, patching and displaying to the user.

  • updated hook: Runs right after beforeUpdate. Use when you need to access the DOM after a property change. data in beforeUpdate and updated are the same

Instance cancel phase:

  • beforeDestroy hook: The stage before the instance is destroyed. This is the place to manage resources, delete resources, clean up components.

  • destroyed hook: At this point, all components are destroyed. When console.log () this object does not get any properties or data.


Thus, through this article, I have shared some of the knowledge that I have learned about the life cycle of a Vue Instance. Thank you everyone for following the article. If you have comments on the article, leave your comments below! ? If it helps everyone a bit, please press upvote for me.


Share the news now

Source : Viblo