Lifecycle Hooks

A Vue component goes through a series of steps from its creation to mounted to the page to being destroyed. These steps are known as the Vue instance lifecycle.

Lifecycle hooks are functions that are invoked during each step. These functions allow developers to add their own code and include created, mounted, updated, and unmounted.

One use for lifecycle hooks to retrieve initial data asynchronously.

const app = Vue.createApp({
  data: function () {
    return {
      users: []
    }
  },
  created: function () { 
     fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(json => this.users = json)
  }
})

const vm = app.mount('#app')

<div id="app">
  <ul>
    <li v-for="user in users">{{ user.name }}</li>
  </ul>
</div>