301

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:

  1. Is there any case where created would be used over mounted?
  2. What can I use the created event for, in real-life (real-code) situation?
lesssugar
  • 15,486
  • 18
  • 65
  • 115
  • 39
    `created` is called earlier, so it makes sense to trigger data fetching from API backend for example. – Egor Stambakio Aug 22 '17 at 09:22
  • 7
    Can confirm, the examples in Fullstack Vue book all use `created()` to dispatch actions for api calls. – chovy Sep 26 '18 at 06:11
  • @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 Jan 13 '21 at 10:47
  • @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 Jan 24 '21 at 20:46
  • 1
    @wittgenstein ok we agree, although Vue official doc uses the mounted hook https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html – LastM4N Jan 24 '21 at 20:54

2 Answers2

415

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:

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

  1. 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;
    });
}
Vamsi Krishna
  • 30,568
  • 8
  • 70
  • 78
  • 10
    When making api call in created does it wait for all of the async operations to complete before moving on to the next life cycle stage? – Ominus Oct 09 '18 at 20:19
  • 13
    @Ominus no it does not wait, Run this fiddle- https://jsfiddle.net/1k26sqrx/] and check out the console logs – Vamsi Krishna Oct 10 '18 at 08:54
  • 4
    I've noticed that when mounted() is used instead of created(). Vue tests if the reactive variable set, really exists as reactie variable. If not, an error is thrown. This is not the case in created() "Property or method "foo" is not defined on the instance but referenced during render. Make sure that this property is reactive." – Rob Juurlink Jun 04 '19 at 12:18
  • So if it does not wait (per @Omnius comment) what is the added value of `created` for data fetching? It may be that the data starts to be fetched in `created` and once Vue moves to the mount stage, they still won't be there (and errors will be thrown) – WoJ Jul 25 '20 at 08:55
  • @WoJ For that reason you should have a loading flag and use this flag to show a loader until the data is fetched. – Vamsi Krishna Jul 25 '20 at 08:58
  • @WoJ - it's best to fetch data as early as possible, not after the DOM has been rendered – ness-EE Sep 16 '20 at 11:10
  • But then, why don't people do everything in created? Isn't it quite rare to use DOM properties? Said in another way, if I don't have any use of the DOM, should I use created? – tobiasBora Oct 09 '20 at 11:38
  • 2
    @tobiasBora as long as you do not need to interact with DOM, created should do – Vamsi Krishna Oct 09 '20 at 11:44
  • @VamsiKrishna ok thanks. Also, if you create several object, I guess that `created` will be called as many times as there are objects, like `mounted`. – tobiasBora Oct 09 '20 at 11:59
  • 2
    @tobiasBora by several objects if you mean multiple due instances, yes every vuue instance will call it's respective `created ` hook. But `created` is called only once when a due object is instantiated. – Vamsi Krishna Oct 09 '20 at 13:59
  • @VamsiKrishna ok thanks... But sometimes it's possible to keep an object in cache even if it's destroyed... does that mean that in that case mount can be called several times while created will be called only once (per this specific instance)? – tobiasBora Oct 09 '20 at 16:20
  • 2
    @tobiasBora yes, it's called only once – Vamsi Krishna Oct 11 '20 at 08:16
  • @VamsiKrishna fiddle no longer working - returns `404`. – Daniel Danielecki Nov 14 '20 at 13:21
  • Mounted has the word "DOM" in it. Created has "A"jax or "A"xios. Now you will never forget. – Len Nov 17 '21 at 15:47
-3

For the created() hook, the data after manipulation in the browser it not shown in the DOM before mounted. In simple words the data takes time to manipulate the DOm seen the browser .

The mounted() hook is called after the DOM has been mounted or rendered which enables you to have access to the DOM elements and you can perform DOM manipulation.The best use for the mounted hook is if you need to access the DOM immediately before or after the initial render.

Paolo
  • 20,112
  • 21
  • 72
  • 113
Muhammad Numan
  • 237
  • 4
  • 20