vue2、vue3，生命周期详解
一、Vue2.x
Vue2的生命周期
是指Vue实例从创建到销毁的整个过程中，会经历一系列的阶段和回调函数。它分为8个阶段，包括了组件的创建、挂载、更新和销毁等过程。
1、beforeCreate:
在实例初始化之后，但在数据观测和事件配置之前被调用。此时，data和methods等选项尚未初始化，并且无法访问this。
2、created:
实例已经完成数据观测和事件配置，但挂载阶段还未开始。在这个阶段，可以访问data和methods，并且可以进行一些异步操作。
3、beforeMount:
在挂载开始之前被调用。此时，模板编译已经完成，但尚未将模板渲染到DOM中。
4、mounted:
挂载完成时被调用。此时，实例已经将模板渲染到DOM中，并且可以对DOM进行操作。通常在这个阶段进行一些初始化的工作，比如获取远程数据。
5、beforeUpdate:
数据更新时调用，但在DOM重新渲染之前。在这个阶段，可以对数据进行一些处理或做一些其他操作。
6、updated:
数据更新完成时调用。此时，DOM已经重新渲染，可以对更新后的DOM进行操作。
7、beforeDestroy:
实例销毁之前调用。在这个阶段，实例仍然完全可用，可以进行一些清理工作。
8、destroyed:
实例销毁之后调用。在这个阶段，实例已经被销毁，所有的事件监听器和子组件也都被移除。
这些生命周期钩子函数提供了在不同阶段执行代码的机会，让我们可以更好地控制Vue实例的行为。
两个特殊的生命周期钩子函数
1、activated:
在使用
2、deactivated:
在使用
这两个钩子函数主要用于处理缓存组件（通过
总结起来，Vue的生命周期是指Vue实例从创建到销毁的整个过程中，会经历一系列的阶段和回调函数。这些生命周期钩子函数提供了在不同阶段执行代码的机会，让我们可以更好地控制Vue实例的行为，并且还有特殊的钩子函数用于处理缓存组件的状态变化。
两个全局的过渡钩子函数
1、beforeEnter:
在进入过渡之前调用。可以在此函数中定义进入过渡前的初始状态。
2、enter:
进入过渡完成时调用。可以在此函数中定义进入过渡后的最终状态。
这两个过渡钩子函数与Vue的过渡系统相关，用于定义元素进入过渡动画的状态。
自定义的钩子函数
1、beforeRouteEnter:
在路由进入组件前被调用。该钩子函数可以在组件加载前进行一些处理，比如获取数据、权限验证等操作。
2、beforeRouteUpdate:
在当前路由复用组件时调用（例如，从A路由跳转到B路由再返回A路由）。该钩子函数可以用来对路由参数或查询进行响应，以及在不同参数下重新执行组件逻辑。
3、beforeRouteLeave:
在离开当前路由时调用。该钩子函数可以用来做一些确认保存或取消操作，例如提示用户保存修改或取消离开。
这些自定义钩子函数是与Vue Router结合使用的，用于实现在路由切换过程中的额外逻辑处理。
总结起来，除了常见的生命周期钩子函数、特殊的钩子函数和全局的过渡钩子函数之外，Vue还提供了一些自定义的钩子函数，用于与Vue Router结合使用，在路由切换过程中进行额外的逻辑处理。这些钩子函数可以帮助我们更好地控制组件的行为并实现更丰富的交互体验。
其他较少使用的钩子函数
1、activated:
在 keep-alive 组件被激活时调用。keep-alive 组件用于缓存组件实例，当组件被激活时，activated 钩子函数会被调用。
2、deactivated:
在 keep-alive 组件被停用时调用。当组件被停用时，deactivated 钩子函数会被调用。
3、errorCaptured:
在捕获一个来自子孙组件的错误时调用，常用于全局错误处理。
4、render:
在组件 DOM 渲染完成后调用，可以在此钩子函数中访问到组件的真实 DOM 元素。
这些补充的钩子函数通常是为了满足特定的需求而存在的，并不是在每个组件中都常用到的。开发者根据具体场景和需求来选择是否使用这些钩子函数。
二、vue3.x
Vue 3生命周期
Vue 3 由于引入了组合式API，生命周期钩子函数的使用方式有所变化。下面是Vue 3中常见的生命周期钩子函数及其对应的组合式API：
beforeCreate（已被移除） => 在组件实例初始化之前调用。 对应的组合式API：在Count: {{ count }}
在上面的示例中，我们通过"setup"函数创建了一个响应式的计数器变量count，并定义了一个增加计数的方法increment。然后，将这些值返回给模板中使用。
需要注意的是，在"setup"函数中返回的变量和方法会暴露给模板，因此可以在模板中直接使用。而在Vue 2中，这些属性和方法需要在data或methods选项中声明，才能在模板中使用。
总结起来，"setup"函数是Vue 3中引入的组合式API的入口点，用于组件的初始化设置。在该函数中，我们可以使用响应式API创建响应式数据、定义计算属性、编写事件处理函数等，并将它们返回供模板使用。这种方式相较于Vue 2的选项式API更加灵活和直观。
Count: {{ count }}
在上述示例中，我们使用