Vue.js - Which component lifecycle should be used for fetching data?

Question

After reading one of Alligator.io posts about Vue that was saying that mounted lifecycle is a bad place to use http get. I was wondering if there are any guidelines to how prope

Answer 1

The answers make sense but if we use the mounted() hook to call the API's, Assuming that the DOM is rendered. If we update a state here in mounted() will it trigger another render ?

I am sure that in created() hook the DOM is not yet mounted. So, I might go with created().

Answer 2

The created() lifecycle hooks fullfills all requirements for fetching and processing API data.

However the official Vue documentation uses the mounted() lifecycle hook in example code for integration API calls with axios: https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

Both lifecycle hooks mounted() and created() are widely used for fetching API data and considered as good practice.

Answer 3

I`m prefer call API in created hook. Quote from alligator.io:

In the created hook, you will be able to access reactive data and events are active. Templates and Virtual DOM have not yet been mounted or rendered.

So you easy can access to data to parse and save response from a server if you need.

Regards.