本文详细比较了Vue3与Vue2中的关键生命周期钩子，包括beforeCreate、setup、created、mounted等，并补充了Vue3新增的activated/deactivated和errorCaptured。了解两者差异有助于优化组件开发和性能提升。
图示（Vue2为例）：
对比：
| vue2 | Description | vue3 | Description |
|---|---|---|---|
| beforeCreate | 组件实例刚被创建，组件属性计算之前，如data属性等 | setup | 开始创建组件之前，在 beforeCreate 和 created 之前执行。创建的是 data 和 method |
| created | 组件实例刚被创建，属性已绑定，但DOM还没生成，$el属性还不存在 | ||
| beforeMount | 模块编译/挂载之前 | onBeforeMount | 模块编译/挂载之前 |
| mounted | 模块编译/挂载之后 | onMounted | 模块编译/挂载之后 |
| beforeUpdate | 组件更新之前 | onBeforeUpdate | 组件更新之前 |
| updated | 组件更新之后 | onUpdated | 组件更新之后 |
| beforeDestroy | 组件销毁/卸载之前 | onBeforeUnmount | 组件销毁/卸载之前 |
| destroyed | 组件销毁/卸载后 | onUnmounted | 组件销毁/卸载后 |
补充：
| vue2 | vue3 | Description |
|---|---|---|
| activated | onActivated | 组件被激活时（手动） |
| deactivated | onDeactivated | 组件被移除时（手动） |
| errorCaptured | onErrorCaptured | 捕获一个来自子孙组件的错误时被调用（被动） |
扫一扫
6396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
