mounted vue code example
Example 1: vue lifecycle hooks
<script>
export default {
beforeCreate() {
console.log("beforeCreate")
},
created() {
console.log("created")
},
beforeMount() {
console.log("beforeMount")
},
mounted() {
console.log("mounted")
},
beforeUpdate() {
console.log("beforeUpdate")
},
updated() {
console.log("updated")
},
beforeDestroy() {
console.log("beforeDestroy")
},
destroyed() {
console.log("destroyed")
}
}
</script>
Example 2: mounted in vue js
Mounted is the most-often used hook in the lifecycle. mounted() is called
after DOM has been mounted so you can access the reactive component,
templates, and DOM elements and manipulate them.
In Server Side Rendering created()is used over mounted() because
mounted() is not present in it.
<template>
<p>I am text inside the component.</p>
</template>
<script>
export default {
mounted() {
console.log(this.$el.textContent)
}
}
</script>