VUE生命周期

vue2 原理

组件挂载、组件更新和组件销毁时相应方法的执行时机。 每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。

可以看到在vue整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解：

• beforeCreate：创建实例之前执行的钩子事件
• created：实例创建完成后执行的钩子
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed vue1.0与2.0的生命周期

beforeCreate -> use setup() created -> use setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted errorCaptured -> onErrorCaptured

示例：

创建文件Life.vue，代码如下：

DOCTYPE html>

    
        
        生命周期
    
    
        
            {{msg}}
            改变msg
        
        
        
            let vm = new Vue({
                el: "#app",
                data: {
                    msg: "生命周期"
                },
                methods: {
                    setMsg: function () {
                        this.msg = '改变后的数据';
                    }
                },
                beforeCreate() {
                    console.log("实例创建之前");
                },
                created() {
                    console.log("实例创建完成");
                },
                beforeMount() {
                    console.log("模板编译之前")
                },
                mounted() {
                    console.log("模板编译完成")
                },
                beforeUpdate() {
                    console.log("数据更新之前");
                },
                updated() {
                    console.log("数据更新完毕");
                },
                beforeDestroy() {
                    console.log("实例销毁之前");
                },
                destroyed() {
                    console.log("实例销毁完成");
                }
            });
        
    

运行后打开console可以看到打印出来内容如下:

点击按钮之前

点击按钮之后

vue3

vue3也提供了Composition API形式的生命周期钩子，与vue2.x中钩子对应关系如下：

beforeCreate =====setup（）

created =========setup（）

beforeMount=====onBeforeMount

mounted========onMounted

beforeUpdate====onBeforeUpdate

updated========onUpdated

beforeUnmount==onBeforeUnmount

unmounted=====onUnmounted