Vue2 vs Vue3 生命周期全面对比：created 的进化与革新！！！

🎯 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) // ✅ 可访问 data
    this.fetchData() // 典型异步请求场景
  }
}

• Vue3 的替代方案：

import { ref } from 'vue'
export default {
  setup() {
    const message = ref('')
    // 🔥 直接执行相当于 created
    console.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. 常见问题避坑

1. this 丢失问题：
   Composition API 中不再通过 this 访问实例，需用 getCurrentInstance()
2. 异步请求竞态：
   使用 AbortController 或 watchEffect 自动取消
3. 插件兼容性：
   检查第三方库是否支持 Vue3 的 app.use() 注册方式

---

五、总结：技术选型建议

1. 新项目：
   • 首选 Vue3 Composition API，利用 setup() 的代码组织优势
   • 搭配 <script setup> 语法糖提升开发体验
2. 旧项目维护：
   • 渐进式迁移：单个组件改用 @vue/compat 兼容模式
   • 优先重构高频修改的组件