Vue Lifecycle

A Vue instance 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.

Hooks

Vue Lifecycle Hooks are functions that are invoked during each part the Vue instance lifecycle. We can use these hooks to insert custom code at specific stages. The lifecycle hooks include: created, mounted, updated, and destroyed.

One use for lifecycle hooks to retrieve initial data asynchronously.

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

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