vue中的生命周期及钩子函数

  <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"哈哈哈",
                num:1111
            },
            methods: {
                
            },
 
            // vue实例创建之前
            beforeCreate(){
                console.log('beforeCreate');
                console.log(this.name);
            }
    </script>

created --- vue实例"创建后",注意：在这个函数中，可以识别 到 vue中data数据中心的数据
  <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"哈哈哈",
                num:1111
            },
            // vue实例创建之后
            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:"哈哈哈",
                num:1111
            },
            // dom挂载之前
            beforeMount(){
                console.log("beforeMount");
                   //查看dom元素
                console.log(document.body.querySelector("#app").innerhtml);
            }
        })
    </script>

 mounted ---DOM挂载之后    this.$el---此时的$el为“真实的”DOM节点
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"哈哈哈",
                num:1111
            },
            // dom挂载之后
            mounted(){
                console.log("mounted");
                console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

  
    <div id="app">
        <p id="num">{{num}}</p>
        <button @click="num++">点击数据更新(num+1)</button>
    </div>
  // 数据更新前
            beforeUpdate(){
                console.log("beforeUpdate--数据更新前");
                // 查看dom元素
                console.log(document.body.querySelector("#num").innerHTML);
            },
            // 数据更新后
            updated(){
                console.log("updated--数据更新后");
                // 查看dom元素
                console.log(document.body.querySelector("#num").innerHTML);
            }