Vue.js – lifecycle hooks, the layman’s overview

Previously I wrote a blog-post on Vue and why we are making the switch to this framework here at Vertica. I want to expand on some of the concepts that may be useful to know about when working with Vue. In this article I will focus on the lifecycle-hooks. Each Vue-instance has a series of methods attached to them that will be called throughout it’s lifecycle. You can think of the lifecycle as the time from which the component is created, mounted onto the DOM, updated by user-interaction and all the way to its destruction. (Which is when the component is removed from the DOM)


So, there are four stages to the Vue-lifecycle you need to remember:

  • Create
  • Mounting
  • Updating
  • Destroy

Each of these stages have two lifecycle-hooks, one before the actual event is triggered (called “before”) and one that is triggered when the lifecycle-event completes. So in total there are eight lifecycle-hooks. This illustration depicts the Vue’s lifecycle, you can see all the hooks and their relation to each other:

Created

beforeCreate()

Once the component is instantiated the beforeCreate-hook will fire. This is called before any event-listeners are attached to component and the data-model is made reactive. Actually, what you will notice when using the beforeCreate()-hook is that at this point in the lifecycle, Vue has no access to the data-model. For instance, this piece of code will not output “The name of the country is: Norway”  in the alert-window:

Instead, the attempt to use the data-property this.name will return undefined, since there is no such variable to reference at the moment beforeCreate() is triggered.

created()

The created-hook then fires as the next step of the lifecycle-chain. Once this is called, Vue has started watching your data for changes and listening for events. A typical use of the created-hook would be to load any data you need to display in the DOM. For instance, sending a request to an API for data and then storing it inside the component’s data-model. Here’s a sample use-case, continuing on the code from our previous example:

The created()-hook has access to the data-properties and methods of the Vue-component, meaning in the example above this.getData() will be executed, and the fetch-call will have access to the country-name so that the API-call will successfully bind the response to the country-property of our data. At this point the Vue-component is still isolated from our view-layer however. So nothing can can be displayed in the DOM at this point of the lifecycle. The Vue-instance is initialized, but still out of reach to the native DOM.

Mounted

beforeMount()

The mounted-hooks will take care of tying your component to a template and rendering it. As depicted in the lifecycle-illustration, the beforeMounted()-hook gets called before the template is rendered.

mounted()

Once the mounted-hook gets triggered, Vue has rendered the component in the DOM and will start an update-cycle if there are changes in the data. When the update-cycle is invoked and reaches the final stage, the mounted-hooks will again be triggered to enable any changes to be rendered in the DOM.

A notable idiosyncracy with Vue 2.0 onwards is that the mounted()-hook itself does not ensure that the element exists in the DOM at its hook-call. That may be annoying to learn if you just swallowed the content of the previous paragraph whole, but the solution is to make Vue’s nextTick()-function. This function takes a callback-function as one of its arguments, whose code will be executed after the DOM has been updated. You can make use of the nextTick-function inside the mounted()-hook to be sure that your code will be executed at the right time.

Generally, the mounted-hook is useful for making changes to the DOM, since it has access to the $el-property of your component. The $el-property gives you access to the resolved DOM-structure after it has been created.

Updated

beforeUpdate()

As mentioned, the updating-hooks are invoked each time data changes. The beforeUpdate-hook gives you a chance to do any custom logic or operations that should happen before the component’s data is changed. At this point in the update-cycle, Vue’s virtual DOM is not yet updated.

Virtual DOM?
The virtual DOM is Vue’s internal representation of the DOM. You will often come across the terms virtual vs. native DOM in “Vue-speak”, where native refers to the DOM the browser operates on. The virtual DOM resolves the structure of your DOM-tree before it is patched, so this makes for faster rendering.  

(Note: for a further explanation of Vue’s virtual DOM, take a look at this article: https://medium.com/js-dojo/whats-the-deal-with-vue-s-virtual-dom-3ed4fc0dbb20)

updated()

Once updated() is set off, Vue’s virtual DOM has been re-rendered and patched so the changes can be mounted onto the DOM. This means that any logic defined inside this hook will be performed right after any changes have been rendered in the DOM.

Destroyed

Finally, there are the destroyed-hooks which will be called before/after the Vue-component no longer is tied to the DOM.

beforeDestroyed()

Once again, there is a before-hook that lets you do any concluding logic before your component is eventually torn down. A typical use-case for the beforeDestroyed()-hook is  to deregister low-level subscriptions from your component. This is useful to prevent memory-leaks from your application.

destroyed()

The destroyed()-hook will be triggered last. There are a couple of things happening here:

  • The component itself will be destroyed and all its data-bindings detached
  • Event-listeners will be removed
  • Child components (if there are any) will also be destroyed

The lifecycle is now completed and your component will be gone, unfortunately.

Summing it up

The lifecycle is a very important concept in Vue, and having a firm grasp of the different lifecycle-hooks will give you a nice set of tools to firmly control your component’s reactivity and how to interact with the events occurring both from the server and through user-interaction.

For further reading, it might be worth taking a look at the Vue-documentation, especially this part that covers the lifecycle-hooks:

https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

Thanks for reading! (And please feel free to comment below.)