0Pricing
Vue Academy · Lesson

Lifecycle Hooks and Data Fetching

Fetch data at the right point in the component lifecycle.

When to Fetch Data

Components have a lifecycle: they are created, mounted to the DOM, updated, and eventually unmounted. Knowing which lifecycle hook to use for data fetching keeps your app responsive and correct.

The created Hook

The created hook runs after reactive data is set up but before the component is inserted into the DOM. It is a good place to start fetching data because reactivity already works.

export default {
  data() {
    return { posts: [] }
  },
  created() {
    this.fetchPosts()
  }
}

All lessons in this course

  1. HTTP Requests with Axios
  2. Lifecycle Hooks and Data Fetching
  3. Error Handling and Global Interceptors
← Back to Vue Academy