在 Vue 中，生命周期是一个很重要的概念；每个组件都有自己的生命周期，从被创建到卸载的过程，组件的生命周期可以分为四个阶段：创建阶段、挂载阶段、更新阶段和卸载阶段。了解这些阶段有助于开发者更好地控制组件的行为。
生命周期
选项式
在 Vue3 之中，选项式 API 的组件生命周期与 Vue 2 中的生命周期非常相似，我们先来看看选项式中组件的生命周期；
创建阶段
beforeCreate
beforeCreate 生命周期钩子函数，它会在组件实例初始化完成之后立即调用，但是在这个生命周期钩子里面，data 、computed 和 methods 中的数据都还没有初始化，因此不能访问这些属性。所以，通常不建议在这个阶段做太多的事情，因为组件还没有准备好。
created
created 生命周期钩子函数，它则是在组件实例处理完所有与状态相关的选项后调用，在 created 钩子中，组件的数据 (data)、计算属性 (computed properties) 和方法 (methods) 都已经被初始化。
但是，这个钩子发生在挂载 (mount) 过程之前，因此此时 $el( 组件所挂载的 DOM 元素 ) 还未被初始化，所以不能执行与 DOM 相关的操作。
挂载阶段
beforeMount
beforeMount 生命周期钩子，它在组件挂载 (mount) 到 DOM 之前被调用。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
beforeMount 通常用于在组件挂载之前做一些准备性的操作，如果需要根据初始数据做一些计算或设置监听器，就可以在 beforeMount 中进行。
mounted
mounted 生命周期钩子，它在组件（包括其所有同步子组件）被挂载到 DOM 并完成首次渲染后被调用；在此阶段，组件现在已完全可见并且可以与 DOM 进行交互。这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用。
更新阶段
beforeUpdate
beforeUpdate 生命周期钩子，它在响应式数据更改导致的虚拟 DOM 重新渲染之前被调用。这个钩子发生在实际的 DOM 更新之前，此时你可以访问最新的 props 和 data，但不能访问更新后的 DOM。
在 beforeUpdate 钩子中，组件的数据 (data)、计算属性 (computed properties) 和方法 (methods) 都已经被更新。所以，如果需要根据新的数据做一些计算或设置监听器，可以在 beforeUpdate 中进行。
updated
updated 生命周期钩子，在组件因为一个响应式状态变更而更新其 DOM 树之后调用；在 updated 钩子中，组件的 DOM 已经根据最新的数据完成了更新。
然而，当我们在 updated 钩子中修改了一个响应式属性，这会触发一个新的更新周期，导致updated 可能会触发两次；并且如果在 updated 钩子中不当处理数据更改，可能会导致无限循环，从而引发性能问题甚至栈溢出。
卸载阶段
当我们在页面上切换不同的组件显示时，就会经历当前组件的卸载阶段和需要显示组件的挂载
beforeUnmount
beforeUnmount 生命周期钩子，在一个组件实例被卸载之前调用。在 beforeUnmount 钩子中，仍然可以访问组件实例的属性和方法，包括 $el 和 $data。
这个钩子为开发者提供了一个机会来执行必要的清理工作，例如取消事件监听器、清除定时器等，以确保组件被正确地销毁，避免内存泄漏等问题。
unmounted
unmounted 生命周期钩子，在一个组件（及其所有子组件）实例被卸载之后调用。在 unmounted 钩子中，所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
组合式
在 Vue3 的组合式API中，组件的生命周期与选项式API的基本类似，只是改成不同的函数形式去实现相同的功能。
setup()
在 Vue3 中的组合式 API 中，创建阶段由 setup() 函数完成，setup() 函数在组件实例被创建后立即调用，承担着 Vue 2 中 beforeCreate 和 created 钩子的职责。
setup()的执行时机与beforeCreate类似，在data和methods等选项还未初始化之前。- 它的功能类似于
created钩子，因为它是在首次渲染前执行的。
挂载阶段
onBeforeMount()
onBeforeMount() 注册一个钩子，在组件被挂载之前被调用。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
onMounted()
onMounted() 注册一个回调函数，在组件挂载完成后执行。这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用。
更新阶段
onBeforeUpdate()
onBeforeUpdate() 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
onUpdated()
onUpdated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的，因为多个状态变更可以在同一个渲染周期中批量执行 (考虑到性能因素)。
卸载阶段
onBeforeUnmount()
onBeforeUnmount() 注册一个钩子，在组件被挂载之前被调用。当这个钩子被调用时，组件实例依然还保有全部的功能。
onUnmounted()
onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用。
nextTick()
了解完组件的生命周期之后，nextTick 也是一个非常有用的函数，它可以帮助你确保某些操作在 DOM 更新后执行。
这是因为 Vue 采用异步更新机制，这意味着当你改变响应式数据时，视图更新会被延迟到下一个事件循环。nextTick 函数可以在状态改变后立即使用，以等待 DOM 更新完成。
