当前位置：首页 > news >正文

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

news 来源：原创 2025/6/17 22:47:10

🎯 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` 引用