详解 Vue 的各个生命周期

Vue 组件的生命周期

在 Vue 中，组件的生命周期可以被划分为创建、运行和销毁三个阶段。以下是每个阶段的重要生命周期钩子。

1.1 创建阶段

在这个阶段，组件开始创建。包括了以下几个生命周期钩子：

• beforeCreate：在实例初始化之后、数据观测 (data observation) 和事件/侦听器配置之前被调用。
• created：在实例被创建后调用。此时实例已被完全设置，包括数据观测和属性初始化。

示例：

new Vue({
    data() {
        return {
            message: 'Hello, Vue!'
        }
    },
    beforeCreate() {
        console.log('beforeCreate: 实例刚被创建，数据未初始化');
    },
    created() {
        console.log('created: 实例已创建，数据准备就绪:', this.message);
    }
});

1.2 挂载阶段

在这个阶段，组件被挂载到 DOM 上。包括以下生命周期钩子：

• beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
• mounted：在挂载完成后被调用，此时组件的 DOM 结构已被渲染并且可以访问。

示例：

new Vue({
    el: '#app',
    data() {
        return {
            message: 'Hello, Vue!'
        }
    },
    beforeMount() {
        console.log('beforeMount: 组件即将挂载，还未渲染到 DOM');
    },
    mounted() {
        console.log('mounted: 组件已挂载，当前 DOM:', this.$el);
    }
});

1.3 更新阶段

这个阶段是组件数据发生变化后，组件的重新渲染。相关生命周期钩子有：

• beforeUpdate：在数据发生变化，DOM 更新之前被调用。
• updated：在 DOM 更新完成后被调用。

示例：

new Vue({
    el: '#app',
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++;
        }
    },
    beforeUpdate() {
        console.log('beforeUpdate: 数据即将更新，当前 count:', this.count);
    },
    updated() {
        console.log('updated: DOM 更新完成，新的 count:', this.count);
    }
});

1.4 销毁阶段

这个阶段是组件被销毁的时刻，相关生命周期钩子有：

• beforeDestroy：在实例销毁之前调用，此时仍可以访问实例。
• destroyed：在实例被销毁后调用，所有的事件监听器将被移除。

示例：

new Vue({
    el: '#app',
    data() {
        return {
            isVisible: true
        }
    },
    beforeDestroy() {
        console.log('beforeDestroy: 组件即将被销毁');
    },
    destroyed() {
        console.log('destroyed: 组件已被销毁');
    },
    template: `<div>
                  <button @click="isVisible = false">销毁组件</button>
                  <p v-if="isVisible">Hello, Vue!</p>
               </div>`
});

生命周期总结

Vue 的生命周期钩子允许开发者在组件的不同生命阶段插入自定义逻辑。通过合理使用这些钩子，开发者可以：

• 在组件被创建时进行初始化和设置。
• 在挂载后进行 DOM 操作。
• 在组件更新前后执行特定逻辑。
• 在组件生命周期末尾清理资源和事件监听。

理解组件的生命周期，对于编写高效、可靠的 Vue 应用至关重要。通过结合生命周期钩子，我们能够确保各个阶段之间的逻辑衔接与数据的一致性。

生命周期钩子对比表

生命周期钩子	触发时机	说明
beforeCreate	实例初始化后	数据未初始化，事件和侦听器未配置
created	实例创建后	数据已就绪，可以访问属性和方法
beforeMount	挂载开始之前	render 函数首次调用前，DOM 还未生成
mounted	挂载完成后	DOM 对象已生成，可以进行 DOM 操作
beforeUpdate	数据更新前	可以读取现有状态，但下一轮 DOM 更新未开始
updated	DOM 更新后	可以执行依赖于更新 DOM 结果的操作
beforeDestroy	实例销毁前	可以清理事件和其他外部资源
destroyed	实例销毁后	所有事件监听器被移除，完成收尾工作

参考链接

• Vue.js 官方文档
• Vue.js 生命周期