vue lifecycle hooks

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    beforeCreate() {
2      // before! observe the data and props
3      console.log("beforeCreate")
4    },
5    // observing data and props
6    // init events
7    created() {
8      console.log("created")
9      // have access to data and props
10      // good time to fetch data and manipulate data on the component
11    },
12    // check if there is an "el" option and render it.
13    // else check if there is a template and render it but not show yet.
14    beforeMount() {
15      console.log("beforeMount")
16      // finish render the template and its child component
17      // good time to manipulate data that came back from child component
18    },
19    // render the template to the real DOM
20    mounted() {
21      console.log("mounted")
22      // the template is render and printed on the real DOM
23      // if you manipulate the data here its effect on the view that already printed 
24    },
25    beforeUpdate() {
26      console.log("beforeUpdate")
27      // just before any update of the component happens
28      // good time to debug what the status before the change
29    },
30    // the update happens
31    updated() {
32      console.log("updated")
33      // good time to debug what changed
34    },
35    beforeDestroy() {
36      console.log("beforeDestroy")
37      // component before unmounted, time for update the things that happens on this component 
38    },
39    // clean all events, watchers, and child components
40    destroyed() {
41      console.log("destroyed")
42      // component unmounted, time for clean ups
43    }

1beforeCreate() {
2      // before! observe the data and props
3      console.log("beforeCreate")
4    },
5    // observing data and props
6    // init events
7    created() {
8      console.log("created")
9      // have access to data and props
10      // good time to fetch data and manipulate data on the component
11    },
12    // check if there is an "el" option and render it.
13    // else check if there is a template and render it but not show yet.
14    beforeMount() {
15      console.log("beforeMount")
16      // finish render the template and its child component
17      // good time to manipulate data that came back from child component
18    },
19    // render the template to the real DOM
20    mounted() {
21      console.log("mounted")
22      // the template is render and printed on the real DOM
23      // if you manipulate the data here its effect on the view that already printed 
24    },
25    beforeUpdate() {
26      console.log("beforeUpdate")
27      // just before any update of the component happens
28      // good time to debug what the status before the change
29    },
30    // the update happens
31    updated() {
32      console.log("updated")
33      // good time to debug what changed
34    },
35    beforeDestroy() {
36      console.log("beforeDestroy")
37      // component before unmounted, time for update the things that happens on this component 
38    },
39    // clean all events, watchers, and child components
40    destroyed() {
41      console.log("destroyed")
42      // component unmounted, time for clean ups
43    }