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.

Last Updated 1652187645422

The difference between created and mounted in Vue

📣 Sponsor