When to use created() method in vue?

Question

I have learned life cycle hooks of Vue.js but didn't find any practical scenario where created() function is used ?

I know that created() function can access reactive data and events but cannot access DOM element. But actually I don't know how to use it. Please someone help me providing practical scenario where Created() function is used . Thanks in advance.

you can check this post -https://stackoverflow.com/questions/45813347/difference-between-the-created-and-mounted-events-in-vue-js/45814848#45814848 — Vamsi Krishna, Oct 15 '18 at 08:04

score 5 · Answer 1 · edited Jul 15 '22 at 21:03

5

Have a look at this page on the vue site

According to the diagram:

the created method will be called before component template is made. so you can not access template but you can change values that should be used in the template. for example you can convert json props to object or change component static data and ... The only difference 'created' with 'mounted' is that you can perform performance before the template is made

but remember do not change reactive data in created method. because every time that those data changes created method will not be called again. also you do not have access to this.$el in created method

Now, which one you use or which one you need depends on yourself

edited Jul 15 '22 at 21:03

tony19

125,647
18
229
307

answered Oct 15 '18 at 07:22

Zoha

546
7
13

1

What's the difference if I do this in `beforeMount` stage? It hasn't rendered as well. – Timothy Lee Oct 15 '18 at 07:25
Then can I use created() instead of mounted() for just changing value of reactive data? @Zoha – Diwas Poudel Oct 15 '18 at 07:28
1

At that moment, the template has been compiled but still $el has not been created @TimothyLee – Zoha Oct 15 '18 at 07:30
not for reactive data. because every time that data was changed updated method will be called not created method. created method will be called just once when vue wants to compile template – Zoha Oct 15 '18 at 07:35

score 5 · Answer 2 · answered Oct 15 '18 at 08:45

A lot of people use the Global Event Bus pattern in Vue:

https://alligator.io/vuejs/global-event-bus/

An example of that page which sets up an event listener has this example:

EventBus.$on('i-got-clicked', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

This is an event you could set up before the DOM template has finished rendering for this particular component. If you would wait on the DOM template to finish here you might miss a click. You simply want to do this as soon as possible.

Just like when your component fires an AJAX request, you don't necessarily always have to wait for the DOM to have finished rendering your component. A lot of times you can fire the request straight away. So why wouldn't you want to shave off some time and fire the AJAX request straight away?

Anything that is in your mounted hook and does not need the DOM, can be moved into a created hook so it will be executed sooner in your Vue lifecycle.

score 5 · Answer 3 · answered Oct 15 '18 at 12:59

5

The created() method can be a great place to do additional data initializations that don't depend on the DOM. I do this quite often in fact.

answered Oct 15 '18 at 12:59

RonC

31,330
19
94
139

When to use created() method in vue?

3 Answers3