vue3和vue2生命周期的差异

vue2生命周期

beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeDestroy()
destroyed()

具体作用前往上期：生命周期

vue3生命周期

1.vue3的钩子函数

setup()
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted

2.对应vue2中的生命周期的钩子函数

beforeCreate-> 使用setup()
created-> 使用setup()
beforeMount->onBeforeMount
mounted->onMounted
beforeUpdate ->onBeforeUpdate
updated->onUpdated
beforeDestroy-> onBeforeUnmount
destroyed-> onUnmounted
errorCaptured->onErrorCaptured

3.新增的钩子函数

组合式 API 还提供了以下调试钩子函数
onRenderTracked
注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。
这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
onRenderTriggered
注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。
这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

4.当我们使用keep-alive对组件进行缓存时会有一些特定的生命周期钩子函数（组件不会销毁会一直保持活性）

activated：当组件被激活（插入到 DOM）时调用。
deactivated：当组件被停用（从 DOM 中删掉）时调用。

可以在这些生命周期钩子函数中进行一些特定的操作，例如重新加载数据、开启定时器等。
总结来说，keep-alive 可以在 Vue 中对组件进行缓存，提升性能和用户体验。通过设置包裹组件的 include 和 exclude 属性以及使用生命周期钩子函数，可以更细粒度地控制哪些组件需要被缓存和在缓存状态下的行为。