vue2，3生命周期

Vue.js 的生命周期在 Vue 2 和 Vue 3 中有所不同，但基本的概念是相似的。Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程，这个过程中 Vue 实例会触发一系列的事件，我们称之为生命周期钩子（Lifecycle Hooks）。开发者可以利用这些钩子来执行自己的代码，如数据初始化、DOM 操作、事件监听/移除等。

Vue 2 生命周期

Vue 2 提供了以下生命周期钩子：

1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3. beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
4. mounted：el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。但是要避免更改状态，因为这可能会导致无限循环的更新。
7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue 3 中的 setup

setup 函数是 Vue 3 中 Composition API 的入口点。它在组件的 beforeCreate 和 created 钩子函数之前被调用，是组件中使用 Composition API 的第一个函数。在 setup 函数中，你可以定义响应式数据、计算属性、生命周期钩子等。

setup 函数的两个重要特点：

1. 调用时机：在组件的 beforeCreate 和 created 生命周期钩子之前调用，因此在这个函数中不能访问组件的 this 上下文（因为此时组件实例尚未创建）。
2. 返回值：setup 函数的返回值是一个对象，这个对象中的所有属性和方法都将被合并到组件的上下文中，并可以在模板中直接使用。

Vue 3 生命周期（包含 setup）

结合 setup 函数，Vue 3 的生命周期可以看作是在组件的不同阶段自动调用的函数集合，这些函数允许执行自定义的逻辑。以下是Vue 3生命周期的完整列表（包含Options API和Composition API中的钩子）：

• Options API 生命周期钩子（与Vue 2相似，但名称可能有所变化）：
  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeUnmount（Vue 2中为beforeDestroy）
  • unmounted（Vue 2中为destroyed）
  • activated（与相关）
  • deactivated（与相关）
• Composition API 生命周期钩子（新增或替代）：
  • setup（在beforeCreate和created之前调用，用于定义响应式数据和函数）
  • onBeforeMount（替代Vue 2的beforeMount）
  • onMounted（替代Vue 2的mounted）
  • onBeforeUpdate（替代Vue 2的beforeUpdate）
  • onUpdated（替代Vue 2的updated）
  • onBeforeUnmount（替代Vue 2的beforeDestroy）
  • onUnmounted（替代Vue 2的destroyed）
  • onErrorCaptured（新的生命周期钩子，用于捕获来自子孙组件的异常）

需要注意的是，虽然Options API和Composition API提供了不同的方式来定义和使用生命周期钩子，但它们都可以在同一个组件中使用。然而，在实际开发中，通常会选择其中一种API风格来保持代码的一致性和可维护性。