vue 之 生命周期详解

---

做vue相关的项目有一段时间了，对vue的使用比较熟练，但是一些基础的概念点还是比较模糊，在这里总结一下，与大家共享，也为了之后在这方面更好的发展。下面首先是官方提供的关于vue生命周期的一张概念图： vue生命周期

由图可见:

生命周期名称	函数	定义
创建前	beforeCreate	组件实例刚刚建立，组件属性计算之前
创建后	created	组件实例已经建立，组件属性已经计算
编译/挂载前	beforeMount	已经渲染出虚拟dom节点，如<i>{{msg}}</i>
编译/挂在后	mounted	已经渲染出实际dom节点
更新前	beforeUpdate	渲染出更新数据后的虚拟dom节点
更新后	updated	渲染出更新数据后的实际dom节点
销毁前	beforeDestroy	组件实例依然存在，可以使用
销毁后	destoryed	组件实例被完全销毁

测试代码：

<template>
    <div class="test">
        <h1>{{ msg }}</h1>
    </div>
</template>
<script>
    export default {
        name: 'test',
        data() {
            return {
                msg: 'cuiht'
            }
        },
        // 创建前状态
        beforeCreate() {
            console.log("%c%s", "color:green", 'beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red", "el: ");
            console.log(this.$el);
            console.log("%c%s", "color:red", "data: ");
            console.log(this.$data);
            console.log("%c%s", "color:red", "msg: ");
            console.log(this.msg);
        },
        // 创建后状态
        created() {
            console.log("%c%s", "color:green", 'created 创建后状态===============》');
            console.log("%c%s", "color:red", "el: ");
            console.log(this.$el);
            console.log("%c%s", "color:red", "data: ");
            console.log(this.$data);
            console.log("%c%s", "color:red", "msg: ");
            console.log(this.msg);
        },
        // 挂载前状态
        beforeMount() {
            console.log("%c%s", "color:green", 'beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red", "el: ");
            console.log(this.$el);
            console.log("%c%s", "color:red", "data: ");
            console.log(this.$data);
            console.log("%c%s", "color:red", "msg: ");
            console.log(this.msg);
        },
        // 挂载后状态
        mounted() {
            console.log("%c%s", "color:green", 'mounted 挂载后状态===============》');
            console.log("%c%s", "color:red", "el: ");
            console.log(this.$el);
            console.log("%c%s", "color:red", "data: ");
            console.log(this.$data);
            console.log("%c%s", "color:red", "msg: ");
            console.log(this.msg);
            this.msg = 'update';
        },
        // 更新前状态
        beforeUpdate() {
            console.log("%c%s", "color:green", 'beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red", "el: ");
            console.log(this.$el);
            console.log("%c%s", "color:red", "data: ");
            console.log(this.$data);
            console.log("%c%s", "color:red", "msg: ");
            console.log(this.msg);
        },
        // 更新后状态
        updated() {
            console.log("%c%s", "color:green", 'updated 更新后状态===============》');
            console.log("%c%s", "color:red", "el: ");
            console.log(this.$el);
            console.log("%c%s", "color:red", "data: ");
            console.log(this.$data);
            console.log("%c%s", "color:red", "msg: ");
            console.log(this.msg);
            this.$router.push('/index')
        },
        // 销毁前状态
        beforeDestroy() {
            console.log("%c%s", "color:green", 'beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el: ");
            console.log(this.$el);
            console.log("%c%s", "color:red", "data: ");
            console.log(this.$data);
            console.log("%c%s", "color:red", "msg: ");
            console.log(this.msg);
        },
        // 销毁后状态
        destroyed() {
            console.log("%c%s", "color:green", 'destroyed 销毁后状态===============》');
            console.log("%c%s", "color:red", "el: ");
            console.log(this.$el);
            console.log("%c%s", "color:red", "data: ");
            console.log(this.$data);
            console.log("%c%s", "color:red", "msg: ");
            console.log(this.msg);
        }
    }
</script>
<style scoped></style>

生命周期测试示意图
由于测试项目原因，部分生命周期效果测试效果并不明显。

要有梦想，即使遥远。