Vue 2 与 Vue 3 生命周期对比

维度

Vue 2

Vue 3

API 风格

仅 Options API

Options API + Composition API

命名规范

beforeDestroy / destroyed

beforeUnmount / unmounted

初始化阶段

beforeCreate → created

setup() 统一替代

调试钩子

无

renderTracked / renderTriggered

SSR 支持

有限

onServerPrefetch

完整对照表

阶段

Vue 2 (Options API)

Vue 3 (Options API)

Vue 3 (Composition API)

说明

创建

beforeCreate

beforeCreate

setup()

setup() 在 beforeCreate 之前执行

创建

created

created

setup()

初始化逻辑统一放在 setup() 中

挂载

beforeMount

beforeMount

onBeforeMount

DOM 挂载前

挂载

mounted

mounted

onMounted

DOM 挂载完成,可安全访问 DOM

更新

beforeUpdate

beforeUpdate

onBeforeUpdate

数据变化,重新渲染前

更新

updated

updated

onUpdated

重新渲染完成

卸载

beforeDestroy

beforeUnmount

onBeforeUnmount

Vue 3 更名为 unmount

卸载

destroyed

unmounted

onUnmounted

组件已卸载,清理工作在此进行

缓存

activated

activated

onActivated

<KeepAlive> 组件激活时

缓存

deactivated

deactivated

onDeactivated

<KeepAlive> 组件停用时

错误

errorCaptured

errorCaptured

onErrorCaptured

捕获后代组件错误

调试

—

renderTracked

onRenderTracked

仅开发模式,追踪响应式依赖

调试

—

renderTriggered

onRenderTriggered

仅开发模式,追踪渲染触发原因

SSR

—

—

onServerPrefetch

服务端渲染时预取数据


Vue 2 与 Vue 3 生命周期对比
http://localhost:8090/archives/vue-2-yu-vue-3-sheng-ming-zhou-qi-dui-bi
作者
Administrator
发布于
2025年06月19日
许可协议