vue生命周期

Vue 2 生命周期钩子

Vue 组件的生命周期由一系列的钩子函数组成，这些钩子函数允许你在组件生命周期的不同阶段执行自定义的逻辑。下面是 Vue 2.x 中常用的生命周期钩子函数：

1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和事件配置之前被调用。

2. created：实例已经创建完成，数据观测 (data observer)、属性和方法的运算以及 watch/event 事件回调已经准备好。

3. beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。

4. mounted：实例挂载完成后调用，此时组件 DOM 已经渲染出来。

5. beforeUpdate：在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。

6. updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

7. activated：该组件在 组件中被激活时调用。

8. deactivated：该组件在 组件中被停用时调用。

9. beforeDestroy：在实例销毁之前调用。在这里，实例仍然完全可用。

10. destroyed：实例销毁后调用。此时，Vue 实例的所有指令已被解绑，所有事件侦听器已被移除。

通过使用这些生命周期钩子函数，你可以在组件的不同生命周期阶段执行相关的操作，比如初始化数据、发送网络请求、订阅事件、操作 DOM 等。这使得你可以更好地控制和管理组件的生命周期行为。

vue3生命周期的更改

Vue 3.x 中的生命周期钩子函数与 Vue 2.x 类似，只是钩子函数的名称稍有不同。主要的变化是将 beforeCreate 和 created 钩子函数替换为 setup 函数，以支持 Composition API。
此外，还有一些其他的生命周期钩子函数，如 errorCaptured 用于捕获组件内部的错误，renderTracked 和 renderTriggered 用于跟踪组件的依赖追踪和响应式触发等。
errorCaptured 是在 Vue 3.x 中引入的一个新生命周期钩子函数。它可以用于捕获组件内部的错误，并对其进行处理。该钩子函数接收两个参数，第一个参数是错误对象，第二个参数是错误来源（即导致错误的组件实例）。通过在 errorCaptured 中捕获错误，可以在组件层级中处理错误，并防止它们冒泡到父组件并导致整个应用崩溃。

在 Vue 2.x 中，如果需要全局捕获错误，可以使用 Vue.config.errorHandler 配置全局的错误处理函数。在该函数中可以对错误进行捕获和处理，而不是使用特定的生命周期钩子函数。

请注意，在 Vue 3.x 中，使用 errorCaptured 可以更方便地在组件级别捕获和处理错误。但在 Vue 2.x 中，只能通过全局的错误处理函数来处理错误。
他保留了vue2的生命钩子，但是也改了beforeDestroy为beforeUnmount，改了destroyed为unmounted

在 Vue 3 中，由于引入了 Composition API，一些生命周期钩子函数发生了变化。下面是 Vue 3 中常用的生命周期钩子函数：

1. setup：在组件创建阶段之前被调用，用于设置组件的初始状态、引入依赖等。可以返回一个响应式对象，供组件内部使用。

2. beforeCreate：在实例初始化之后，数据观测 (data observer) 和事件配置之前被调用。

3. created：实例已经创建完成，数据观测 (data observer)、属性和方法的运算以及 watch/event 事件回调已经准备好。

4. beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。

5. mounted：实例挂载完成后调用，此时组件 DOM 已经渲染出来。

6. beforeUpdate：在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。

7. updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

8. beforeUnmount：在实例即将被卸载之前调用。

9. unmounted：实例卸载后调用。此时，Vue 实例的所有指令已被解绑，所有事件侦听器已被移除。

除了上述生命周期钩子函数，还有一些新的生命周期钩子函数在 Vue 3 中被引入，用于支持 Composition API 以及更好地管理组件的生命周期：

1. onBeforeMount：在挂载开始之前被调用，类似于 Vue 2 中的 beforeMount。

2. onMounted：实例挂载完成后调用，类似于 Vue 2 中的 mounted。

3. onBeforeUpdate：在数据更新之前调用，类似于 Vue 2 中的 beforeUpdate。

4. onUpdated：在虚拟 DOM 重新渲染和打补丁后调用，类似于 Vue 2 中的 updated。

5. onBeforeUnmount：在实例即将被卸载之前调用，类似于 Vue 2 中的 beforeDestroy。

6. onUnmounted：实例卸载后调用，类似于 Vue 2 中的 destroyed。

使用这些生命周期钩子函数，你可以在不同阶段执行自定义逻辑，处理数据、响应式行为、网络请求以及其他与组件生命周期相关的操作。