Vue2 与 Vue3 生命周期详解与对比

生命周期（Life Cycle）是指一个对象或实例从创建、运行到销毁的全过程。在 Vue 中，生命周期就是组件实例从创建、初始化数据、挂载 DOM、渲染更新直至销毁卸载的整个过程。理解生命周期有助于我们在合适的时机执行逻辑，比如数据请求、事件监听、DOM 操作、资源释放等。

一、Vue2 的生命周期

Vue2 中的生命周期钩子分为 8 个主要阶段，以及一些特殊场景下的钩子：

1. 创建阶段

beforeCreate：实例初始化之前，数据和事件都还未挂载，常用于插件初始化。
created：实例创建完成，此时可以访问数据和方法，但 DOM 还未挂载。常用于异步数据请求。

2. 挂载阶段

beforeMount ：在挂载开始之前被调用，this.$el 已经存在，但还未替换挂载点。
mounted：实例挂载完成，真实 DOM 已经渲染，可进行 DOM 操作。

3. 更新阶段

beforeUpdate：数据更新后、DOM 重新渲染前触发，此时数据已变但视图未更新。
updated：DOM 更新完成，此时可以操作最新的 DOM。

4. 销毁阶段

beforeDestroy：实例销毁之前触发，可以清除定时器、事件监听器等。
destroyed：实例销毁后触发，数据绑定和事件监听已全部移除。

5. 特殊钩子

activated / deactivated ：在 keep-alive 缓存组件激活与停用时触发。
errorCaptured：捕获子组件错误时触发。

二、Vue3 的生命周期

Vue3 保留了 Vue2 的大部分生命周期钩子，但命名方式和调用方式有所调整：

1. 创建阶段

setup() ：Vue3 新增的组合式 API 入口，在组件实例创建前调用，无法访问 this，取而代之的是使用 ref、reactive 等 API 管理数据。

2. 挂载阶段

onBeforeMount ：对应 Vue2 的 beforeMount。
onMounted ：对应 Vue2 的 mounted。

3. 更新阶段

onBeforeUpdate ：对应 Vue2 的 beforeUpdate。
onUpdated ：对应 Vue2 的 updated。

4. 销毁阶段

onBeforeUnmount ：对应 Vue2 的 beforeDestroy。
onUnmounted ：对应 Vue2 的 destroyed。

5. 特殊钩子

onActivated / onDeactivated ：对应 Vue2 的 activated / deactivated，用于 keep-alive 场景。
onErrorCaptured ：对应 Vue2 的 errorCaptured。

三、Vue2 与 Vue3 生命周期对比

阶段	Vue2	Vue3（组合式 API）
创建阶段	beforeCreate、created	setup（取代部分逻辑）
挂载阶段	beforeMount、mounted	onBeforeMount、onMounted
更新阶段	beforeUpdate、updated	onBeforeUpdate、onUpdated
销毁阶段	beforeDestroy、destroyed	onBeforeUnmount、onUnmounted
特殊钩子	activated、deactivated、errorCaptured	onActivated、onDeactivated、onErrorCaptured

关键区别

Vue3 用 setup 替代了 Vue2 的 beforeCreate 和 created，在 setup 中定义的数据与方法可在整个组件生命周期中使用。

Vue3 生命周期钩子统一以 onXxx 命名，更符合组合式 API 的调用习惯。

Vue2 的 this 指向组件实例，而 Vue3 的 setup 无法访问 this，需要依靠组合式 API 管理数据与方法。

四、数据请求应该放在哪个阶段？

Vue2 ：通常放在 created（避免页面闪动）或 mounted（当需要操作 DOM 时）。
Vue3 ：推荐在 setup 中使用 onMounted 进行数据请求，这样逻辑清晰且易于维护。

示例（Vue3）：

javascript 复制代码

import { onMounted, ref } from 'vue'

export default {
  setup() {
    const list = ref([])

    onMounted(async () => {
      const res = await fetch('/api/data')
      list.value = await res.json()
    })

    return { list }
  }
}

五、总结

Vue2 和 Vue3 生命周期的核心流程一致，都是 创建 → 挂载 → 更新 → 卸载。
Vue3 在设计上更符合函数式思维，将生命周期统一封装为组合式 API 的钩子函数。
对比来看，Vue3 的 setup 取代了 Vue2 的初始化阶段，其他生命周期只是更换了命名方式。
对于开发者来说，Vue2 更直观，Vue3 更灵活、可组合，适合复杂应用逻辑的拆分和复用。