vue2和vue3 对比
生命周期
| 生命周期钩子 | Vue 2 | Vue 3 | 说明 |
|---|
| beforeCreate | ✔️ | ✔️ | 实例初始化之后，数据观测和事件配置之前调用。 |
| created | ✔️ | ✔️ | 实例创建完成后调用，此时数据已被观测。 |
| beforeMount | ✔️ | ✔️ | 在挂载开始之前被调用，相关的 render 函数首次被调用。 |
| mounted | ✔️ | ✔️ | 实例被挂载后调用，相关的 DOM 已被插入。 |
| beforeUpdate | ✔️ | ✔️ | 数据更新时调用，发生在虚拟 DOM 重新渲染之前。 |
| updated | ✔️ | ✔️ | 数据更新后调用，虚拟 DOM 重新渲染后。 |
| beforeDestroy | ✔️ | ✔️（改为 beforeUnmount） | 实例销毁之前调用，清理工作。 |
| destroyed | ✔️ | ✔️（改为 unmounted） | 实例销毁后调用，清理工作已完成。 |
| activated | ✔️ | ✔️ | 仅在使用 <keep-alive> 时调用，激活组件。 |
| deactivated | ✔️ | ✔️ | 仅在使用 <keep-alive> 时调用，停用组件。 |
| beforeRouteEnter | ✔️ | ✔️ | 路由进入前调用（需使用 vue-router）。 |
| beforeRouteUpdate | ✔️ | ✔️ | 路由更新前调用（需使用 vue-router）。 |
| beforeRouteLeave | ✔️ | ✔️ | 路由离开前调用（需使用 vue-router）。 |
vue3 hooks
在 Vue 3 中，Composition API 引入了一些新的生命周期钩子（hooks），这些钩子与 Vue 2 的选项式 API 的生命周期钩子略有不同。以下是 Vue 3 中的生命周期钩子与其说明的表格输出：
| 生命周期钩子 | 用途 | 说明 |
|---|
| setup | 组件的初始化逻辑 | 组件实例创建前调用，设置响应式数据、计算属性等。 |
| onBeforeMount | 组件挂载前 | 组件挂载之前调用，适合进行一些准备工作。 |
| onMounted | 组件挂载后 | 组件挂载完成后调用，可以进行 DOM 操作。 |
| onBeforeUpdate | 组件更新前 | 数据更新前调用，适合在虚拟 DOM 渲染前进行的操作。 |
| onUpdated | 组件更新后 | 数据更新后调用，适合执行依赖于更新的操作。 |
| onBeforeUnmount | 组件卸载前 | 组件销毁前调用，适合清理工作。 |
| onUnmounted | 组件卸载后 | 组件销毁后调用，适合执行清理操作。 |
| onActivated | 仅在 <keep-alive> 中使用 | 组件激活时调用，适合执行激活逻辑。 |
| onDeactivated | 仅在 <keep-alive> 中使用 | 组件停用时调用，适合执行停用逻辑。 |
| onErrorCaptured | 错误捕获钩子 | 捕获子组件的错误，适合错误处理和日志记录。 |
说明
setup：是 Composition API 的核心，所有响应式状态和计算属性都在这里定义。onBeforeMount、onMounted：与 Vue 2 的钩子类似，用于处理组件的挂载过程。onBeforeUpdate、onUpdated：用于处理组件更新时的逻辑。onBeforeUnmount、onUnmounted：用于处理组件卸载时的清理工作。onActivated、onDeactivated：仅在使用 <keep-alive> 时才会触发，适合处理组件的激活与停用。onErrorCaptured：用于捕获并处理子组件中的错误。
