Vue的每个生命周期具体形式展示

Vue的生命周期

vue的生命周期：
1.vue创建之前beforeCreated
2.创建created
3.挂载之前beforeMouted
4.挂载mouted
5.更新之前beforeUpdate
6.更新完成updated
7.销毁之前 beforeDestory
8.销毁完成destoryed
demo:
dom结构部分：

<div id="app" ref="app">
    <!-- ref 用于获取Dom属性 -->
    {{name}}
</div>

js部分：

<script>
    let vm = new Vue({//生命周期也是方法，不需要外在干预
        el: "#app",
        data: {
            name: "VUE开发"
        },
        template:"<h1>this is h1 template</h1>",
        beforeCreate() {//01创建之前(数据没有挂载，只是一个空壳，无法操作真实的DOM和访问数据)
            console.log("将要创建")
            console.log(this.$data);//数据 undefined
            console.log(this.$el);//节点  undefined
        },
        created() {//02创建完毕，获得初始数据，无法渲染DOM[挂载]
            console.log("创建完毕")
            console.log(this.$data);//数据 
            console.log(this.$el);//节点  undefined
        },
        beforeMount() {//03即将挂载，可以访问到DOM也可以访问原始数据
            console.log("即将挂载");
            console.log(this.$el);

        },
        mounted() {//04挂载完毕,一个vue的基本操作（mustache渲染完成），有数据，有DOM
            console.log("挂载完毕");
            console.log(this.$el);
        },
        beforeUpdate() {//05更新之前
            //控制台输入vm.$data.name = "新值"，后触发函数 beforeUpdate()
            console.log("即将更新渲染");
            let name = this.$refs.app.innerHTML;
            console.log("name:" + name);
        },
        updated() {//06更新完成 data中的数据已经被更新后的值替换
            console.log("更新渲染完成");
            let name = this.$refs.app.innerHTML;
            console.log("name:" + name);
        },
        //以下两个在控制台并不能被打印出来，执行完vm.$destroy()即可答打印
        beforeDestroy () {//07销毁之前
            console.log("销毁之前");
            console.log(this.$data);//数据 
            console.log(this.$el);//节点  
        },
        destroyed () {//08销毁完成
            console.log("销毁完成");
            console.log(this.$data);//数据 
            console.log(this.$el);//节点  
        } 
    });
    console.log("创建完毕后vue实例外的打印输出" + vm.$data)
</script>