Which VueJS lifecycle hook must Asynchronous HTTP requests be called in?

问题

I'd like to know how before I render a page, I want to send an async GET request to my server to retrieve data and populate the properties in data. I heard the best way to do this is to call the function that sends this request in one of the three lifecycle hooks Vue js offers that operate before the DOM is rendered. The three are beforeCreate(), created(), beforeMount(). Which one must this request be called in ideally? And why?

回答1:

Vue's initialization code is executed synchronously.

Technically, any asynchronous code you run in any of those hooks will only respond after all of those hooks end. See demo:

new Vue({
  el: '#app',
  beforeCreate() {
    setTimeout(() => { console.log('fastest asynchronous code ever') }, 0);
    console.log('beforeCreate hook done');
  },
  created() {
    console.log('created hook done');
  },
  beforeMount() {
    console.log('beforeMount hook done');
  },
  mounted() {
    console.log('mounted hook done');
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  Check the console.
</div>

In other words, if you make an Ajax call in beforeCreate, no matter how fast the API responds, the response will only be processed way later, way after the created() has been executed.

What should guide your decision, then?

• Need just to trigger a call as soon as possible?
  • Use beforeCreate()
  • Why?
    • It runs sooner than any of those hooks, but...
• Need to read from or modify data right away?
  • Use created()
  • Why?
    • State is only initialized between beforeCreate() and created(), so if you assign some data before created(), it would be lost.
• Need anything that is generated after created()?
  • Use beforeMount()
  • Why?
    • I don't know anything that isn't available at created() and is available at beforeMount() other than the compiled this.$options.render render function (see source as well), so this case must really be a rare situation.

回答2:

As mentioned above, the key issue that exists in both Vue and React is, if you make a network request and the data arrives before the component is created, there is no instance to set the data to.

beforeCreated is similar to React's componentWillMount. You generally wouldn't want to execute a network request here because you might get your data back before the component exists. It's like setting this.data = data but there is no component, so this doesn't exist yet.

A better place in React is componentDidMount, but we don't care about that. In Vue, a better place is created because the component has been created already, so this exists.

Here is an example:

<template>
  <div>
    <span v-if="error">{{ error }}</span><br>
    I like:<br>
    {{ data }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '',
      error: undefined,
    }
  },

  async created() {
    try {
      const response = await axios.get('/endpoint/stuff')
      this.data = response
    } catch (err) {
      this.error = err
    }
  },
}
</script>

回答3:

The vue-router docs have some advice for patterns to use when retrieving data from a server that is required for component render (see bottom for link).

To determine where to perform the GET request, they first ask if you want to navigate to the route before async GET request is initiated or after

If you want to fetch the data then navigate to the route (before navigation) then the docs suggest performing the async request in the beforeRouteEnter() guard on the incoming component making sure to call next() in beforeRouteEnter() once the async data request has been fulfilled. If you choose this pattern you will want to display some sort of loading indicator as the navigation to the route/rendering of the component will not occur until the data has been fetched.

If you want to navigate to the route then initiate the request (after navigation) then the docs suggest performing the request in the created() hook and using v-if to conditionally show either that the component is loading, an error has occurred, or the view once the data has arrived.

Highly recommend checking out the docs, they have code examples and its well written. https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation

回答4:

It depends.

This depends what you want, for a User Experience. Do you want the route to display immediately, but show a loading spinner on this routes content?

Or do you want to wait until data is fetched, THEN show the route? (which could give the illusion of a laggy application)

If you want to do the first way I mentioned, then you could do it in the created hook of your component.

https://forum.vuejs.org/t/what-is-the-best-hook-to-call-api-to-load-initialisation-data-for-a-component/15167/2

来源：https://stackoverflow.com/questions/49577394/which-vuejs-lifecycle-hook-must-asynchronous-http-requests-be-called-in