Should I use created() or mounted() in Vue?

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.¹ 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.