Vue第一部分(6)：Vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板、销毁等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这些函数在生命周期的不同阶段自动触发执行，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子	含义
beforeCreate（vue对象创建前）	组件实例刚被创建，组件属性计算之前，此时不能访问属性
created（创建后）	组件实例创建完，属性可以访问，但是还不能通过 $el 访问DOM
beforeMount(加载前)	模板编译、挂载之前，可以通过 $el 访问渲染前的DOM
mounted（载入后）	模板编译、挂载之后，可以通过 $el访问渲染前的DOM
beforeUpdate（更新前）	组件更新之前，可以获取组件更新前的DOM
updated（更新后）	组件更新之后，可以获取组件更新后的DOM
beforeDestroy（销毁前）	组件销毁前调用
destroyed（销毁后）	组件销毁后调用

通过以下案例，演示下各个钩子函数的使用：

<div id="app">
    <h1>{{msg}}</h1>
    <button @click="changeMsg">点我修改msg</button>
</div>

<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg:"hell vue"
        },
        methods:{
            changeMsg(){
                this.msg = "hello baizhi";
            }
        },
        beforeCreate:function(){
            // alert("beforeCreate...");
            console.log("beforeCreate...");
            console.log(this.$el);//undefined
            console.log(this.msg);//undefined
        },
        created:function(){
            // alert("created...");
            console.log("created...");
            console.log(this.$el);//undefined
            console.log(this.msg);//hello vue
        },
        beforeMount:function(){
            // alert("beforeMount...");
            console.log("beforeMount...");
            console.log(this.$el);//加载前的标签，就是原始代码,插值表达式、事件绑定都还没解析
            console.log(this.msg);//hello vue
        },
        mounted:function(){
            // alert("mounted...");
            console.log("mounted...");
            console.log(this.$el);//加载后的标签，插值表达式、事件绑定均已解析
            console.log(this.msg);//hello vue
        },
        beforeUpdate:function(){
            // alert("beforeUpdated...");
            console.log("beforeUpdated...");
            console.log(this.$el.innerHTML);//更新前的DOM
            console.log(this.msg);//hello baizhi
        },
        updated:function(){
            // alert("updated...");
            console.log("updated...");
            console.log(this.$el.innerHTML);//更新后的DOM
            console.log(this.msg);//hello baizhi
        },
        beforeDestroy:function(){//在console中执行vm.$destroy()触发，开发时很少关注
            // alert("destroyed...");
            console.log("beforeDestroy...");
            console.log(this.$el);
            console.log(this.msg);
        },
        destroyed:function(){
            // alert("destroyed...");
            console.log("destroyed...");
            console.log(this.$el);
            console.log(this.msg);
        }
    })
</script>

说明：一般地，我们会在 created 钩子函数中，从服务端获取数据，并对数据进行初始化。