Vue Lifecycle Hooks

In this short lesson we will learn about Vue’s lifecycle hooks and how we can leverage them to gain more control over our applications. For this, we will leave our - admittedly slightly contrived - friendlist example behind and just look at the general concept behind these hooks. This also marks the conclusion of our Beginner’s Course text lessons: from next week we will walk through creating a sample app together in our first video course!

Lifecycle hooks run at various stages during your application’s life. This applies to both your Vue instance as well as your components. They run in this order:

beforeCreate

This hook runs at the very start during both client- or server-side rendering, before data is reactive. It can be used to alter your application’s behaviour before it is rendered to the DOM.

created

Similar to beforeCreate, but at this point you have access to reactive data.

beforeMount

This hook is called right before the app is rendered.

mounted

Mounted is probably the most-used hook, as it is useful to fetch remote data once your app has been rendered to the DOM.

beforeUpdate

This hooks runs when your app is about to re-render, for example because some data changed.

updated

Runs right after your app has re-rendered.

beforeDestroy

beforeDestroy is called before your component is removed from the DOM…

destroyed

… and destroyed is called after it has been removed from the DOM. Both of these are useful for cleanup, but not necessarily commonly used.

You can get a great overview of this process in this diagram from the official Vue documentation: Lifecycle Diagram

This course should have equipped you with the basic knowledge required to get a first app started using Vue. Next, we will bring all these concepts together and introduce more advanced features to build real-life apps. Keep an eye on our website or sign up for the newsletter for the start of our video courses!

comments powered by Disqus