• 15 hours
  • Medium

Free online content available in this course.



Got it!

Last updated on 4/13/21

Determine When Your Code Should Run

Log in or subscribe for free to enjoy all this course has to offer!

Component Lifecycle

One of the most common metrics used to measure performance is how long it takes for the user to be able to interact with the site. As a result, you cannot have all of your code start running when the page finishes loading since that would add more wait time, especially when dealing with things like fetching data from an API. Wouldn't it be great if you could run code besides when the component is rendered on the screen?

JavaScript frameworks have recognized this need to be able to run code at different times. So to solve this problem, most frameworks use the concept of a component lifecycle, which establishes a series of milestones that a component undergoes from creation until removal. And Vue is no different!

During the lifecycle of a component, there are three major milestones to be aware of:

  1. Create - which represents the period when the component is being built.

  2. Mount - which represents the period when the component is going to be rendered on the page.

  3. Destroy - which represents the period when the component is going to be removed from the page.

These milestones are useful to know about because there will be times when you want to strategize when a particular action is executing. As a result, being able to plan out when each action will occur will allow you to ensure that users have the best experience possible when using your application.

Lifecycle Hooks

To help solve the timing issue, frameworks like Vue expose lifecycle hooks, which allow you to tap into specific events around these milestones so you can do things like trigger code like API calls before the component even shows up on the page.

  1. beforeCreate

  2. created

  3. beforeMount

  4. mounted

  5. beforeDestroy

  6. destroyed

As you can see in the list, every milestone comes with a pair of lifecycle hooks to allow you to execute code before and after the milestone. This is important because certain actions are not possible during certain lifecycle hooks. For example, if you want to interact with modifying attributes on an HTML element during  beforeCreate, this would be impossible since the element does not yet exist.

Using Lifecycle Hooks

When it comes to using lifecycle hooks, Vue makes it easy to define.

Just like you would define  data  or  computed, they are just another property you add to your Vue configuration object. The only difference is that they are functions rather than simple strings:

<h1>I'm a new component!</h1>
export default {
data: { msg: 'Hello!' },
beforeCreate() { console.log('I have not been created yet!') },
created() { console.log('I have just been created!') },
beforeMount() { console.log('I am about to be mounted to the DOM!') },
mounted() { console.log('I am mounted to the DOM!') },
beforeDestroy() { console.log('I am about to be removed from the DOM!') },
destroyed() { console.log('I no longer exist...') }

Inside of your lifecycle hooks, you can write any JavaScript that you would normally write and refer to any standard Vue properties (e.g.,  data,  computed, etc.) with the  this  prefix just like any other place.


You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P2C4-Begin  branch.


Use a lifecycle hook before the  MenuItem  is rendered to check if the day is even, if so, every item price should be displayed at 10% off.

Let's Recap!

With your newfound knowledge of lifecycle hooks, you can:

  • Strategize when the best time is for certain code to run.

  • Implement lifecycle hooks in your app when needed.

And with that, let's head over to the next chapter, where we'll summarize everything you've learned in this part of the course!

Example of certificate of achievement
Example of certificate of achievement