vue所有生命周期函数/钩子函数理解

下边是一个template 的代码，里边包含了所有vue 生命周期函数，我们可以vue-cli 项目中新建一个模板把下边代码全都复制进去，然后F12打开审查元素，观察这些生命周期函数打印出来的log 里的区别！

<template>
    <div class=\"lifecycle\">
        <p>打开审查元素查看console.log 的值， 点击浏览器回退按钮 查看销毁函数的执行状态</p>
        <div>{{ message }}</div>
        <button @click=\"handleClick\">点击按钮改变状态</button>
    </div>
</template>

< >
export default {
    data(){
        return {
            message : \"初始值\" 
        }
    },
    methods: {
        handleClick(){
            this.message = \'被改变的值\'
        }
    },

    beforeCreate: function () {
            console.group(\'beforeCreate 创建前状态===============》\');
            console.log(\"%c%s\", \"color:red\" , \"el     : \" + this.$el); //undefined
            console.log(\"%c%s\", \"color:red\",\"data   : \" + this.$data); //undefined 
            console.log(\"%c%s\", \"color:red\",\"message: \" + this.message)  
    },
    created: function () {
        console.group(\'created 创建完毕状态===============》\');
        console.log(\"%c%s\", \"color:red\",\"el     : \" + this.$el); //undefined
        console.log(\"%c%s\", \"color:red\",\"data   : \" + this.$data); //已被初始化 
        console.log(\"%c%s\", \"color:red\",\"message: \" + this.message); //已被初始化
    },
    beforeMount: function () {
        console.group(\'beforeMount 挂载前状态===============》\');
        console.log(\"%c%s\", \"color:red\",\"el     : \" + (this.$el)); //已被初始化
        console.log(this.$el);
        console.log(\"%c%s\", \"color:red\",\"data   : \" + this.$data); //已被初始化  
        console.log(\"%c%s\", \"color:red\",\"message: \" + this.message); //已被初始化  
    },
    mounted: function () {
        console.group(\'mounted 挂载结束状态===============》\');
        console.log(\"%c%s\", \"color:red\",\"el     : \" + this.$el); //已被初始化
        console.log(this.$el);    
        console.log(\"%c%s\", \"color:red\",\"data   : \" + this.$data); //已被初始化
        console.log(\"%c%s\", \"color:red\",\"message: \" + this.message); //已被初始化 
    },
    beforeUpdate: function () {
        console.group(\'beforeUpdate 更新前状态===============》\');
        console.log(\"%c%s\", \"color:red\",\"el     : \" + this.$el);
        console.log(this.$el);   
        console.log(\"%c%s\", \"color:red\",\"data   : \" + this.$data); 
        console.log(\"%c%s\", \"color:red\",\"message: \" + this.message); 
    },
    updated: function () {
        console.group(\'updated 更新完成状态===============》\');
        console.log(\"%c%s\", \"color:red\",\"el     : \" + this.$el);
        console.log(this.$el); 
        console.log(\"%c%s\", \"color:red\",\"data   : \" + this.$data); 
        console.log(\"%c%s\", \"color:red\",\"message: \" + this.message); 
    },
    beforeDestroy: function () {
        console.group(\'beforeDestroy 销毁前状态===============》\');
        console.log(\"%c%s\", \"color:red\",\"el     : \" + this.$el);
        console.log(this.$el);    
        console.log(\"%c%s\", \"color:red\",\"data   : \" + this.$data); 
        console.log(\"%c%s\", \"color:red\",\"message: \" + this.message); 
    },
    destroyed: function () {
        console.group(\'destroyed 销毁完成状态===============》\');
        console.log(\"%c%s\", \"color:red\",\"el     : \" + this.$el);
        console.log(this.$el);  
        console.log(\"%c%s\", \"color:red\",\"data   : \" + this.$data); 
        console.log(\"%c%s\", \"color:red\",\"message: \" + this.message)
    }

}
</ >

打印结果如下图，同学们可以自行操作一番看看