1. 从Vue2到Vue3的生命周期变革全景
2014年Vue2发布时,其生命周期钩子设计已经成为前端开发的标准范式。但当我们把时间快进到2020年Vue3问世,会发现Composition API的引入带来了一场静默的革命。作为从Vue2迁移到Vue3的项目老兵,我完整经历了两种生命周期体系的切换过程,今天就来拆解这背后的技术演进逻辑。
在Vue2时代,我们习惯在组件选项中声明created()、mounted()等钩子函数,这种基于选项的API设计直观易懂。但当你维护一个包含300+组件的大型项目时,会发现逻辑关注点被分散在各个生命周期阶段,一个数据初始化的逻辑可能需要在created里定义变量,在mounted里获取数据,在beforeUpdate里重置状态。
Vue3的Composition API通过setup()函数重构了这种范式。现在我们可以把相关逻辑集中编写,用onMounted、onUpdated等函数式API按需注册生命周期回调。这种变化不仅仅是语法糖,它从根本上改变了我们组织组件逻辑的方式。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 生命周期钩子的对照手册
2.1 新旧钩子映射关系
先来看直观的对照表:
| Vue2选项式API | Vue3组合式API | 触发时机说明 |
|---|---|---|
| beforeCreate | 无直接对应 | 被setup()函数完全替代 |
| created | 无直接对应 | 在setup()内部直接执行初始化逻辑 |
| beforeMount | onBeforeMount | DOM挂载前执行 |
| mounted | onMounted | DOM挂载后执行 |
| beforeUpdate | onBeforeUpdate | 响应式数据变更导致DOM更新前 |
| updated | onUpdated |
