Vue2与Vue3生命周期对比

上一篇：Vue2和Vue3模板语法对比
下一篇：Vue2与Vue3通信机制对比

生命周期钩子是 Vue 框架的核心概念之一，理解它们的差异对于平滑迁移和正确使用框架至关重要。通过详细对比 Vue 2 和 Vue 3 的生命周期钩子，包括 Options API 和 Composition API 的使用方式，可以快速掌握这些变化。

一、生命周期阶段概览

Vue 的生命周期主要分为以下几个阶段：
1. 创建阶段（Creation）：实例初始化
2. 挂载阶段（Mounting）：DOM 元素的创建和挂载
3. 更新阶段（Updating）：数据变化导致的重新渲染
4. 销毁/卸载阶段（Destruction/Unmounting）：实例的销毁或卸载

Vue 3 在命名上做了调整，将 "destroy" 相关钩子改为 "unmount"，语义更加准确。

二、主要变化总结

Vue 3 相比 Vue 2 的主要变化：

1. 命名变更：destroy 相关钩子改为 unmount（beforeDestroy → beforeUnmount，destroyed → unmounted）
2. 创建阶段变化：Vue 3 中 beforeCreate 和 created 被 setup() 替代（Composition API）
3. Composition API：新增 onXxx 系列生命周期钩子函数
4. 兼容性：Vue 3 仍支持 Options API 的大部分生命周期钩子（除 beforeCreate 和 created）
5. 新增功能：提供更灵活的生命周期管理方式

三、生命周期钩子详细对比表

以下表格详细列出了 Vue 2 和 Vue 3 所有生命周期钩子的对比，包括语法和代码示例：

对比项	Vue 2语法	Vue 2示例	Vue 3语法	Vue 3示例
创建阶段（初始化）	beforeCreate	beforeCreate() {   console.log("实例初始化") }	已移除 （用setup替代）	-
创建完成	created	created() {   console.log("实例创建完成") }	已移除 （用setup替代）	-
Composition API创建	-	-	setup()	setup() {   console.log("创建阶段") }
挂载前	beforeMount	beforeMount() {   console.log("DOM挂载前") }	beforeMount (Options API)	beforeMount() {   console.log("DOM挂载前") }
Composition API挂载前	-	-	onBeforeMount	import { onBeforeMount } from "vue" onBeforeMount(() => {   console.log("挂载前") })
挂载完成	mounted	mounted() {   console.log("DOM已挂载") }	mounted (Options API)	mounted() {   console.log("DOM已挂载") }
Composition API挂载完成	-	-	onMounted	import { onMounted } from "vue" onMounted(() => {   console.log("已挂载") })
更新前	beforeUpdate	beforeUpdate() {   console.log("数据更新前") }	beforeUpdate (Options API)	beforeUpdate() {   console.log("数据更新前") }
Composition API更新前	-	-	onBeforeUpdate	import { onBeforeUpdate } from "vue" onBeforeUpdate(() => {   console.log("更新前") })
更新完成	updated	updated() {   console.log("数据已更新") }	updated (Options API)	updated() {   console.log("数据已更新") }
Composition API更新完成	-	-	onUpdated	import { onUpdated } from "vue" onUpdated(() => {   console.log("已更新") })
销毁/卸载前	beforeDestroy	beforeDestroy() {   console.log("实例销毁前") }	beforeUnmount **改名**	beforeUnmount() {   console.log("卸载前") }
Composition API卸载前	-	-	onBeforeUnmount	import { onBeforeUnmount } from "vue" onBeforeUnmount(() => {   console.log("卸载前") })
销毁/卸载完成	destroyed	destroyed() {   console.log("实例已销毁") }	unmounted **改名**	unmounted() {   console.log("已卸载") }
Composition API卸载完成	-	-	onUnmounted	import { onUnmounted } from "vue" onUnmounted(() => {   console.log("已卸载") })
keep-alive激活	activated	activated() {   console.log("组件激活") }	activated (Options API)	activated() {   console.log("组件激活") }
Composition API激活	-	-	onActivated	import { onActivated } from "vue" onActivated(() => {   console.log("激活") })
keep-alive停用	deactivated	deactivated() {   console.log("组件停用") }	deactivated (Options API)	deactivated() {   console.log("组件停用") }
Composition API停用	-	-	onDeactivated	import { onDeactivated } from "vue" onDeactivated(() => {   console.log("停用") })
错误捕获	errorCaptured	errorCaptured(err, vm, info) {   console.log(err) }	errorCaptured (Options API)	errorCaptured(err, instance, info) {   console.log(err) }
Composition API错误捕获	-	-	onErrorCaptured	import { onErrorCaptured } from "vue" onErrorCaptured((err) => {   console.log(err) })

四、实际应用示例

以下是一个完整的组件示例，展示如何在 Vue 2 和 Vue 3 中使用生命周期钩子：

Vue 2 Options API 示例

export default {
  data() {
    return {
      message: 'Hello Vue 2!'
    }
  },
  beforeCreate() {
    console.log('1. beforeCreate: 实例初始化')
  },
  created() {
    console.log('2. created: 实例创建完成')
    // 可以访问 data 和 methods
  },
  beforeMount() {
    console.log('3. beforeMount: DOM挂载前')
  },
  mounted() {
    console.log('4. mounted: DOM已挂载')
    // 可以访问 DOM 元素
    this.fetchData()
  },
  beforeUpdate() {
    console.log('5. beforeUpdate: 数据更新前')
  },
  updated() {
    console.log('6. updated: 数据已更新')
  },
  beforeDestroy() {
    console.log('7. beforeDestroy: 实例销毁前')
    // 清理定时器、事件监听器等
  },
  destroyed() {
    console.log('8. destroyed: 实例已销毁')
  },
  methods: {
    fetchData() {
      // 获取数据
    }
  }
}

Vue 3 Composition API 示例

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

const message = ref('Hello Vue 3!')

// setup 本身就相当于 beforeCreate 和 created
console.log('setup: 创建阶段')

onBeforeMount(() => {
  console.log('1. onBeforeMount: DOM挂载前')
})

onMounted(() => {
  console.log('2. onMounted: DOM已挂载')
  // 可以访问 DOM 元素
  fetchData()
})

onBeforeUpdate(() => {
  console.log('3. onBeforeUpdate: 数据更新前')
})

onUpdated(() => {
  console.log('4. onUpdated: 数据已更新')
})

onBeforeUnmount(() => {
  console.log('5. onBeforeUnmount: 卸载前')
  // 清理定时器、事件监听器等
})

onUnmounted(() => {
  console.log('6. onUnmounted: 已卸载')
})

const fetchData = () => {
  // 获取数据
}
</script>

Vue 3 Options API 示例（兼容模式）

export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  },
  // beforeCreate 和 created 不推荐使用
  // 建议使用 setup()
  beforeMount() {
    console.log('DOM挂载前')
  },
  mounted() {
    console.log('DOM已挂载')
    this.fetchData()
  },
  beforeUpdate() {
    console.log('数据更新前')
  },
  updated() {
    console.log('数据已更新')
  },
  beforeUnmount() {  // 注意命名变化
    console.log('卸载前')
  },
  unmounted() {  // 注意命名变化
    console.log('已卸载')
  },
  methods: {
    fetchData() {
      // 获取数据
    }
  }
}

五、最佳实践建议

1. Vue 3 项目优先使用 Composition API：
   - 更灵活的代码组织
   - 更好的逻辑复用
   - 更清晰的类型推断（TypeScript 支持）

2. 数据获取建议：
   - 在 created（Vue 2）或 setup（Vue 3）中发起异步请求
   - 在 mounted/onMounted 中处理 DOM 相关操作

3. 清理工作建议：
   - 在 beforeDestroy/beforeUnmount 中清理定时器、事件监听器
   - 防止内存泄漏

4. 避免在 updated/onUpdated 中：
   - 直接修改状态（会导致无限循环）
   - 进行复杂计算（性能问题）

5. keep-alive 使用：
   - activated/onActivated 用于缓存组件激活时的逻辑
   - deactivated/onDeactivated 用于缓存组件停用时的清理

六、迁移指南

从 Vue 2 迁移到 Vue 3 的注意事项：

1. 生命周期钩子重命名：
   - beforeDestroy → beforeUnmount
   - destroyed → unmounted

2. 创建阶段钩子的变化：
   - 如果使用 Options API，可以继续使用 beforeCreate 和 created（但 Vue 3 建议使用 setup）
   - 如果使用 Composition API，使用 setup() 函数替代这两个钩子

3. Composition API 需要导入：
   - 所有生命周期钩子函数需要从 'vue' 导入
   - 使用 onXxx 形式的函数名

4. 兼容性构建：
   - Vue 3 提供了 @vue/compat 构建版本，可以兼容 Vue 2 的语法
   - 便于逐步迁移大型项目

5. TypeScript 支持：
   - Vue 3 的 Composition API 提供了更好的 TypeScript 支持
   - 类型推断更加准确

七、总结

Vue 3 的生命周期钩子相比 Vue 2 做了一些重要的调整：

核心变化：
- 命名优化：destroy → unmount，语义更准确
- Composition API：提供了更灵活的生命周期管理方式
- setup() 函数：替代了 beforeCreate 和 created 钩子

兼容性：
- Vue 3 仍然支持 Options API 的大部分生命周期钩子
- 提供了平滑迁移的路径