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
