🎯 Vue2 vs Vue3 生命周期全面对比：created 的进化与革新
🔥 核心差异全景图
一、钩子函数命名与定位变化
1. 命名规范革新
| Vue2 钩子 | Vue3 钩子 (Options API) | Vue3 Composition API |
|---|---|---|
beforeCreate | ❌ 无 | setup() 替代 |
created | ✅ 保留 | setup() 替代 |
beforeDestroy | beforeUnmount | onBeforeUnmount |
destroyed | unmounted | onUnmounted |
关键变化解读：
• 语义优化：Vue3 将 destroyed 改为 unmounted，更精准描述组件卸载行为
• 命名统一：所有钩子前缀改为 on，如 onMounted
2. created 的定位迁移
• Vue2 的 created：
export default {created() {console.log('响应式数据已就绪:', this.message) // ✅ 可访问 datathis.fetchData() // 典型异步请求场景}
}
• Vue3 的替代方案：
import { ref } from 'vue'
export default {setup() {const message = ref('')// 🔥 直接执行相当于 createdconsole.log('响应式数据已就绪:', message.value)fetchData() // 无需通过 this 访问return { message }}
}
二、执行机制与阶段差异
1. 生命周期阶段对比
• Vue2 顺序：
父 beforeCreate → 父 created → 父 beforeMount
→ 子 beforeCreate → 子 created → 子 beforeMount → 子 mounted
→ 父 mounted
• Vue3 特性：
• 异步挂载优化：通过 <Suspense> 实现异步组件加载
• 组合式逻辑聚合：setup() 合并了 beforeCreate 和 created 阶段
2. 调试能力增强
Vue3 新增开发模式专用钩子：
import { onRenderTracked, onRenderTriggered } from 'vue'setup() {onRenderTracked((e) => {console.log('依赖追踪:', e) // 响应式依赖收集过程})onRenderTriggered((e) => {console.log('触发更新:', e) // 数据变更触发重新渲染})
}
三、性能优化与破坏性变更
1. 销毁阶段内存管理
| 操作类型 | Vue2 方案 | Vue3 优化方案 |
|---|---|---|
| 定时器清理 | beforeDestroy | onBeforeUnmount |
| 事件解绑 | destroyed | onUnmounted |
| 第三方库释放 | 手动调用销毁方法 | 结合 watchEffect 自动清理 |
代码示例：
// Vue3 自动清理示例
setup() {const timer = ref(null)watchEffect((onInvalidate) => {timer.value = setInterval(() => {}, 1000)onInvalidate(() => clearInterval(timer.value)) // 自动销毁})
}
2. 异步更新机制
Vue3 采用 Proxy 实现响应式，优化更新性能：
• 批量更新：多个数据变更合并为单次渲染
• Tree-shaking 支持：未使用的生命周期钩子不会打包
四、迁移适配指南
1. 代码改造策略
| 场景 | Vue2 写法 | Vue3 适配方案 |
|---|---|---|
| 数据初始化 | created() 中赋值 | setup() 直接声明响应式变量 |
| 全局事件总线 | EventBus.$on | 使用 provide/inject 或 Pinia |
| DOM 操作 | mounted() 访问 $el | onMounted() + ref 引用 |
2. 常见问题避坑
this丢失问题：
Composition API 中不再通过this访问实例，需用getCurrentInstance()- 异步请求竞态：
使用AbortController或watchEffect自动取消 - 插件兼容性：
检查第三方库是否支持 Vue3 的app.use()注册方式
五、总结：技术选型建议
- 新项目：
• 首选 Vue3 Composition API，利用setup()的代码组织优势
• 搭配<script setup>语法糖提升开发体验 - 旧项目维护：
• 渐进式迁移：单个组件改用@vue/compat兼容模式
• 优先重构高频修改的组件
