All in all, the Vue lifecycle methods are fairly straight forward. There's even a helpful Vue lifecycle chart that describes when the various methods are called. All of that is super helpful.
Until you want to use them. If I want to load in data from an API, which method should I use? Why does my component crash sometimes when I try to update DOM elements in created()? Which method should I use for what?
First of all, let's remember when the methods are called as the page is loaded and our components are added.
The created() method will be called on your component after the component object is created but before it is put on the page. All of the component's data, props, computed and methods will be available. The only thing that won't be available is the template or any of the component's DOM. There really is no view yet to speak of.
mounted() is called after the component's DOM created in memory and is added to the page. mounted() is basically Vue saying, "I'm finished with this one."
So, which one do I use?
So, with created() there is no view yet. And because there is no view, this is the perfect time to fetch data from an API or manipulate data passed in via props. Fetching data now means that there will be less of a delay from when the component is show to when the data shows up on the screen because the call will start before the component is rendered.1 When the view is shown, the data you've loaded will be shown as well.
So what is mounted() good for? It's good for loading anything that manipulates the component's DOM. Maybe it's working with a plugin like Google Maps or a slide show library, mounted() is where you will have access to the this.$el variable--representing the component's root element--and can load in those other libraries.
So most of the time, expect to use created() unless you run into a scenario where you need to have access to the DOM first.
-
This cuts down on user perceived speed, but doesn't actually speed up the API call. Thanks to @papa_john for pointing out that this wasn't clear. ↩
Top comments (5)
Thanks for the article.
Regarding api calls in created vs mounted , I haven’t experienced any speed difference for putting fetch calls there. I’m curious , hav suoi and if so - would you mind sharing the scenario?
Another thought that might matter to some ... SSR doesn’t have mounted - so that would be a good reason to use created (if SSR matters to you)
Sorry, I didn't mean to imply that is was actually faster, but that is it user perceived faster. Since the API call is kicked off before the component is rendered, it will already be in progress for when the component is shown on the screen and the user's perception of the loading time is started. This would then cut down on the perceived wait time that the user has to endure before interacting with your component. I'll update the article to reflect this.
And that's an interesting note Server-Side Rendering. Thank you for that.
I often use
mounted. It's an interesting topic... I didn't notice it earlier.But I think will be good if using
created, because like you said, That is the perfect time to do so. So I will change it oncreatedinstead. Let's see what happens next.So far... using the
createdis sleeker (especially when using animation/transition), I try to load 500 user data and I found that result.I usually use 'beforeMount' hook to make APIs calls.
consider using
beforeCreate, but you wouldn't have access tothis. Otherwise,createdwould be nice.