One of the things that most people get confused about when talking about lifecycle hooks in Vue, is the difference between and . They both have similar names, and they feel like they should do the same thing, but there are some subtle differences. created mounted The Difference between and in Vue created mounted To begin with, both and have access to the data and props on your prototype. created() mounted() For example, both hooks will console log 'My Message' below, as well as the default value for , which is 'Some Prop': myProp export default {
    data() {
        return {
	        msg: 'My Message'
        }
    },
    props: {
        myProp: {
            type: String,
            default: 'Some Prop'
        }
    },
    created() {
        console.log(this.msg);
        console.log(this.myProp);
    },
    mounted() {
        console.log(this.msg);        
        console.log(this.myProp);
    }
} Prop Inheritance for and created mounted between and is you do not have access to the DOM in yet. The fundamental difference created() mounted() created() Even if you set a property, it will still be available both in and created() mounted() In the above example, if we try to reference , it will return in , and it will return the DOM element in : this.$el null created() 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 will not be available in . querySelector created() is great for calling APIs, while is great for doing anything after the DOM elements have been completely loaded. created() mounted() Composition API and created or mounted One caveat to this is that if you are using the Composition API, , and indeed no longer exists. You have to instead use . This function takes the place of both and . created() beforeCreated() setup() created() beforeCreated() Therefore, the DOM is still not available in . In the Composition API, remains unchanged. setup() mounted() Also Published Here

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

What Is the Difference Between the Created and Mounted in Vue?

What Is the Difference Between the Created and Mounted in Vue?

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

What Is the Difference Between the Created and Mounted in Vue?

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES