Life cycle and hook functions in Vue

  <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"Hahaha",
                num:1111
            },
            methods: {
                
            },
 
            // Before the vue instance is created beforeCreate(){
                console.log('beforeCreate');
                console.log(this.name);
            }
    </script>

created --- After the vue instance is created, note: in this function, the data in the data center of vue can be identified <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"Hahaha",
                num:1111
            },
            // After the vue instance is created created(){
                console.log("created");
                console.log(this.name);
            }
        })
    </script>

  <div id="app">
        <p>{{name}}</p>
        <p>{{num}}</p>
    </div>
<script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"Hahaha",
                num:1111
            },
            //Before dom is mounted beforeMount(){
                console.log("beforeMount");
                   //View DOM elements console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

 mounted --- after DOM is mounted this.$el --- at this time $el is the "real" DOM ​​node <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"Hahaha",
                num:1111
            },
            // After dom is mounted mounted(){
                console.log("mounted");
                console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

  
    <div id="app">
        <p id="num">{{num}}</p>
        <button @click="num++">Click data update (num+1)</button>
    </div>
  //Before data update beforeUpdate(){
                console.log("beforeUpdate--before data update");
                // View DOM elements console.log(document.body.querySelector("#num").innerHTML);
            },
            //After data is updated updated(){
                console.log("updated--After data updated");
                // View DOM elements console.log(document.body.querySelector("#num").innerHTML);
            }