Vue生命周期详解：各阶段功能及使用示例-优快云博客

本文链接：https://blog.youkuaiyun.com/ACCPluzhiqi/article/details/134602652

本文详细介绍了Vue.js中的各个生命周期钩子函数的作用，包括在实例创建前、创建后、挂载前、挂载后、数据更新前/后、组件激活/停用、销毁前/后以及错误捕获时的行为，以及提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是 Vue 生命周期钩子函数分别做了什么事情的详细说明

详细说明

beforeCreate（创建前）：在实例初始化之前调用。此时，实例的数据观测 (data observer)、属性和方法的运算，以及事件配置等内部设置都已完成，但是尚未挂载到 DOM 上。在这个钩子中，我们可以进行一些数据获取或者变量声明等准备工作。
created（创建后）：在实例创建完成后立即被调用。在这一步，实例已经完成了以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event listener 都已经初始化，但还没有挂载到 DOM 上。在这个钩子中，我们可以进行一些组件内数据的初始化操作。
beforeMount（载入前）：在组件挂载之前调用。在这一步，Vue 实例已经编译模板，但是还没有挂载到 DOM 上。在这个钩子中，我们可以进行一些组件内数据的计算或者处理等准备工作。
mounted（载入后）：在组件挂载之后调用。在这一步，Vue 实例已经将模板编译成的虚拟 DOM 渲染到实际的 DOM 上。在这个钩子中，我们可以进行一些页面元素的初始化或者绑定等操作。
beforeUpdate（更新前）：在数据更新之前调用。在这一步，Vue 实例的数据已经更新，但是虚拟 DOM 还没有重新渲染。在这个钩子中，我们可以进行一些数据校验或者条件判断等操作。
updated（更新后）：在数据更新之后调用。在这一步，Vue 实例的数据已经更新，虚拟 DOM 也已经重新渲染。在这个钩子中，我们可以进行一些页面元素的更新或者刷新等操作。
activated（激活）：在组件被激活时调用。当一个组件被复用时，例如在一个 <keep-alive> 标签中，这个钩子会被调用。在这个钩子中，我们可以进行一些组件的激活状态设置或者数据恢复等操作。
deactivated（停用）：在组件被停用时调用。当一个组件离开 <keep-alive> 标签时，这个钩子会被调用。在这个钩子中，我们可以进行一些组件的停用状态设置或者数据保存等操作。
beforeDestroy（销毁前）：在实例销毁之前调用。此时，实例仍然完全可用。在这个钩子中，我们可以进行一些资源释放或者清理工作等操作。
destroyed（销毁后）：在实例销毁之后调用。此时，所有的子实例、事件监听器和事件发射器都会被清理掉。在这个钩子中，我们不需要再进行任何操作。
errorCaptured（错误捕获）：当捕获到一个来自子孙组件的错误时调用。这个钩子会收到三个参数：错误对象、发生错误的组件实例以及完整的错误堆栈信息。在这个钩子中，我们可以进行一些错误处理或者日志记录等操作。

Vue 生命周期钩子函数示例

beforeCreate（创建前）：在实例初始化之前调用。此时，实例的数据观测 (data observer)、属性和方法的运算，以及事件配置等内部设置都已完成，但是尚未挂载到 DOM 上。

beforeCreate() {
  console.log('beforeCreate');
}

created（创建后）：在实例创建完成后立即被调用。在这一步，实例已经完成了以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event listener 都已经初始化，但还没有挂载到 DOM 上。

created() {
  console.log('created');
}

beforeMount（载入前）：在组件挂载之前调用。在这一步，Vue 实例已经编译模板，但是还没有挂载到 DOM 上。

beforeMount() {
  console.log('beforeMount');
}

mounted（载入后）：在组件挂载之后调用。在这一步，Vue 实例已经将模板编译成的虚拟 DOM 渲染到实际的 DOM 上。

mounted() {
  console.log('mounted');
}

beforeUpdate（更新前）：在数据更新之前调用。在这一步，Vue 实例的数据已经更新，但是虚拟 DOM 还没有重新渲染。

beforeUpdate() {
  console.log('beforeUpdate');
}

updated（更新后）：在数据更新之后调用。在这一步，Vue 实例的数据已经更新，虚拟 DOM 也已经重新渲染。

updated() {
  console.log('updated');
}

activated（激活）：在组件被激活时调用。当一个组件被复用时，例如在一个 <keep-alive> 标签中，这个钩子会被调用。

activated() {
  console.log('activated');
}

deactivated（停用）：在组件被停用时调用。当一个组件离开 <keep-alive> 标签时，这个钩子会被调用。

deactivated() {
  console.log('deactivated');
}

beforeDestroy（销毁前）：在实例销毁之前调用。此时，实例仍然完全可用。

beforeDestroy() {
  console.log('beforeDestroy');
}

destroyed（销毁后）：在实例销毁之后调用。此时，所有的子实例、事件监听器和事件发射器都会被清理掉。

destroyed() {
  console.log('destroyed');
}

errorCaptured（错误捕获）：当捕获到一个来自子孙组件的错误时调用。这个钩子会收到三个参数：错误对象、发生错误的组件实例以及完整的错误堆栈信息。

errorCaptured(err, instance, info) {
  console.log('errorCaptured', err, instance, info);
}