The difference between created and mounted in Vue
📣 Sponsor
In a previous article, I covered all the different lifecycle hooks in Vue. One of the things that most people get confused on when talking about lifecycle hooks, is the difference between created
and mounted
. They both have similar names, and they feel like they should do the same thing, but there are some subtle differences.
The Difference between created and mounted in Vue
To begin with, both created()
and mounted()
have access to the data and props on your prototype. For example, both hooks will console log ‘My Message’ below, as well as the default value for myProp
, which is ‘Some Prop’:
export default {
data() {
return {
msg: 'My Message'
}
},
props: {
myProp: {
type: String,
default: 'My Prop'
}
},
created() {
console.log(this.msg);
console.log(this.myProp);
},
mounted() {
console.log(this.msg);
console.log(this.myProp);
}
}
Prop Inheritance for created and mounted
Even if you set a property, it will still be available both in created()
and mounted()
The fundamental difference between created()
and mounted()
is you do not have access to the DOM in created()
yet. In our example, if we try to reference this.$el
, it will return null
in created()
, and it will return the DOM element in mounted()
:
export default {
created() {
// Returns null
console.log(this.$el);
},
mounted() {
// Returns the DOM element in console:
console.log(this.$el);
}
}
As such, any DOM manipulation, or even getting the DOM structure using methods like querySelector
will not be available in created()
. As mentioned in the article on lifecycle hooks, created()
is great for calling APIs, while mounted()
is great for doing anything after the DOM elements have completely loaded.
Composition API and created or mounted
The one caveat to this is that if you are using the Composition API, created()
, and indeed beforeCreated()
no longer exists. You have to instead use setup()
. This function takes the place of both created()
and beforeCreated()
. Therefore, the DOM is still not available in setup()
. In the Composition API, mounted()
remains unchanged.
More Tips and Tricks for Vue
- How to use Teleport in Vue to Move Parts of Templates
- Creating your first Vue App
- How to Watch for Nested Changes in Vue
- Navigation between views in Vue with Vue Router
- Vue Tips: Optimize your Vue Apps with v-once and v-memo
- How to use Watchers in Vue
- Creating a Reusable Tab Component in Vue
- How v-if and v-else work in Vue
- A Guide to Events in Vue
- How to use Vue Template Refs to Access HTML Elements