Difference between the created and mounted events in Vue.js

Question

Vue.js documentation describes the created and mounted events as follows:

created

Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.

mounted

Called after the instance has just been mounted where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called.

This hook is not called during server-side rendering.

I understand the theory, but I have 2 questions regarding practice:

Is there any case where created would be used over mounted?
What can I use the created event for, in real-life (real-code) situation?

created is called earlier, so it makes sense to trigger data fetching from API backend for example. — Egor Stambakio
Can confirm, the examples in Fullstack Vue book all use created() to dispatch actions for api calls. — chovy
@EgorStambakio What if i dont use created in my component and I use only mounted, is not almost the same in mounted to call the api?I mean that the created hook will be skipped since it wont be called. — LastM4N
@LastM4N you can do it in mounted, that's your choice. But because the hooks run synchronously, you want to do it in the right place. Since the API call has nothing to do with the DOM, it belongs in the created hook. — wittgenstein
@wittgenstein ok we agree, although Vue official doc uses the mounted hook vuejs.org/v2/cookbook/using-axios-to-consume-apis.html — LastM4N

Vamsi Krishna Vamsi Krishna · Accepted Answer · 2017-08-22T10:12:24

created() : since the processing of the options is finished you have access to reactive data properties and change them if you want. At this stage DOM has not been mounted or added yet. So you cannot do any DOM manipulation here

mounted(): called after the DOM has been mounted or rendered. Here you have access to the DOM elements and DOM manipulation can be performed for example get the innerHTML:

console.log(element.innerHTML)

So your questions:

Is there any case where created would be used over mounted?

Created is generally used for fetching data from backend API and setting it to data properties. But in SSR mounted() hook is not present you need to perform tasks like fetching data in created hook only

What can I use the created event for, in real-life (real-code) situation?

For fetching any initial required data to be rendered(like JSON) from external API and assigning it to any reactive data properties

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}

Difference between the created and mounted events in Vue.js

1 Answers