[P3] VueJS – Lifecycle in Vue

Tram Ho

Hello everyone, it’s me. In the previous articles we have learned in general about a Vue Project. Now let’s go a little deeper. In this section we will learn about the Vue Object and its lifecycle. I will still use the project again in this article .

1. Vue Instance

We will focus on the code of the main.js file, our project will run from here. Let’s take a look at the main.js file’s code

As can be seen, our Vue app will start running from here. A Vue application will consist of a Vue root (initialized with new Vue with its properties) and Vue components, forming a comnponent system for the purpose of reuse. As can be seen, in main.js, we create a root vue object. This object will render the App component imported from the App.vue file and mount it on the tag with the id of app . We can see more clearly through the index.html file

Vue will support us to create Vue app according to SPA concept, so we will have only one index.html page as a single view. The content of the views will be rendered with javascript instead of <div id="app"></div> , that’s why when we view source, we can’t see the whole html content as usual (but see with Chorme DevTools still okay). Several properties in a Vue instance:

  • data: contains global variables of a Vue instance
  • filter: filters the data before being displayed
  • watch: Tracks and updates a variable as the data changes
  • computed: is một thuộc tính được tính toán computed một thuộc tính được tính toán , which means that the method defined in this will be treated as a property.
  • methods: a list of methods in a Vue instance

2. Vue lifecycle

On the Vue homepage, there is a very classic and detailed picture of Vue hooks and life cycle.

  1. Created The initialization process that takes place first in the component. Here, we can manipulate data in data or methods . During this process, the virtual DOMs are mount and render and cannot interact with them
  2. Mounted Now that the components have been successfully initialized, we have full control over the data , methods , and even the DOMs in the template .
  3. Updated The process when data changes or there are events that cause the component to re-render.
  4. Destroyed Called when the component has been destroyed.

We try to replace the code in the HelloWorld.vue file with the following

When the change button is clicked, the event click is triggered and calls the changeMsg function declared in methods, which will change the value of the msg variable. This value will change the value of the <h1> tag, so the value of the <h2> tag will be filtered through one filter, converting all ‘0’ to ‘1’. In addition, with lifecycle hooks, we can also handle them before these hooks run using the before hooks like beforeCreate , beforeMount , beforeUpdate , beforeDestroy (as in the image above).


Ok, done! I will end this article here. Hope to see you again in the following articles.

Share the news now

Source : Viblo