So, there are four stages to the Vue-lifecycle you need to remember:
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:
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.
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.
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.
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.
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.
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)
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.
Finally, there are the destroyed-hooks which will be called before/after the Vue-component no longer is tied to the DOM.
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.
The destroyed()-hook will be triggered last. There are a couple of things happening here:
The lifecycle is now completed and your component will be gone, unfortunately.
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:
Thanks for reading! (And please feel free to comment below.)