1<script>
2 export default {
3 beforeCreate() {
4 console.log("beforeCreate")
5 },
6 created() {
7 console.log("created")
8 },
9 beforeMount() {
10 console.log("beforeMount")
11 },
12 mounted() {
13 console.log("mounted")
14 },
15 beforeUpdate() {
16 console.log("beforeUpdate")
17 },
18 updated() {
19 console.log("updated")
20 },
21 beforeDestroy() {
22 console.log("beforeDestroy")
23 },
24 destroyed() {
25 console.log("destroyed")
26 }
27 }
28</script>
1
2Mounted is the most-often used hook in the lifecycle. mounted() is called
3after DOM has been mounted so you can access the reactive component,
4templates, and DOM elements and manipulate them.
5In Server Side Rendering created()is used over mounted() because
6mounted() is not present in it.
7
8
9
10<template>
11 <p>I am text inside the component.</p>
12</template>
13
14
15
16<script>
17
18export default {
19
20 mounted() {
21
22 console.log(this.$el.textContent) // I'm text inside the component.
23
24 }
25
26}
27
28</script>