Vue的生命周期--代码片段

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染

→更新→渲染、销毁等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到

销毁的过程，就是生命周期。

vue的生命周期：

1.vue创建之前beforeCreated

2.创建created

3.挂载之前beforeMouted

4.挂载mouted

5.更新之前beforeUpdate

6.更新完成updated

7.销毁之前 beforeDestory

8.销毁完成destoryed

html部分：

<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销毁完成  组件的数据绑定、监听...去掉后只剩下 dom 空壳
            console.log("销毁完成");
            console.log(this.$data);//数据 
            console.log(this.$el);//节点  
        } 
    });
    console.log("创建完毕后vue实例外的打印输出" + vm.$data)
</script>