vue3的生命周期

一、生命周期

生命周期是指一种事物从诞生到死亡的整个过程。在生物学中，生命周期涉及到一个生物体从出生、成长、繁殖，直到死亡的各个阶段。不同物种的生命周期可能会有所不同，有些生物会经历幼年期、青年期、成年期和老年期等不同的发育阶段。

除了生物学，生命周期这个概念也可以应用于其他领域。在软件开发中，生命周期指的是软件从规划、设计、开发、测试、发布到维护和淘汰的整个过程。在项目管理中，生命周期指的是项目从开始到结束的各个阶段，包括启动、规划、执行、监控和收尾。

生命周期描述了一个事物从开始到结束的整个过程，其中包含了不同的阶段和活动。

1.1、vue2 生命周期

Vue2 中的生命周期可以分为八个阶段，分别是：

1. beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。在这个阶段中，实例的属性和方法都还没有被初始化。
2. created：在实例创建完成后立即调用。在这个阶段中，实例已经完成了数据观测、属性和方法的运算初始化，但是 DOM 元素还没有被创建和挂载。
3. beforeMount：在挂载开始之前被调用。在这个阶段中，模板编译成 render 函数后，即将开始挂载组件到 DOM 节点上。
4. mounted：在组件挂载到 DOM 上后调用。在这个阶段中，组件已经被渲染出来，并且可以进行 DOM 操作。
5. beforeUpdate：在数据更新之前调用。在这个阶段中，组件还没有重新渲染，但是数据已经更新完成，可以进行一些操作。
6. updated：在组件重新渲染后调用。在这个阶段中，组件已经重新渲染，并且可以进行 DOM 操作。
7. beforeDestroy：在实例销毁之前调用。在这个阶段中，组件实例仍然完全可用，可以进行一些操作。
8. destroyed：在实例销毁之后调用。在这个阶段中，组件实例已经被销毁，不能再进行任何操作。

Vue2 的生命周期包括了组件创建、挂载、更新和销毁等各个阶段，我们可以在不同的阶段进行相应的操作和处理。

1.1.1、vue2 生命周期分类

1. 创建阶段：

   • beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。
   • created：在实例创建完成后立即调用。

2. 挂载阶段：

   • beforeMount：在挂载开始之前被调用。
   • mounted：在组件挂载到 DOM 上后调用。

3. 更新阶段：

   • beforeUpdate：在数据更新之前调用。
   • updated：在组件重新渲染后调用。

4. 销毁阶段：

   • beforeDestroy：在实例销毁之前调用。
   • destroyed：在实例销毁之后调用。

这些生命周期钩子函数提供了在不同阶段执行自定义逻辑的机会。我们可以根据需要在这些钩子函数中进行数据处理、DOM 操作、网络请求等操作。

1.2、vue3 生命周期

链接地址：https://cn.vuejs.org/api/composition-api-lifecycle.html

Vue3的生命周期与Vue2有所不同，它引入了Composition API，并重新组织了生命周期钩子函数。

1.2.1、setup()

• 这是Vue3新增的Composition API中的核心函数，它在组件实例初始化时同步调用，用于设置响应式状态、计算属性和副作用（如监听器）。
• 在setup()中可以访问props和context参数，但不能直接使用this。

1.2.2、onBeforeMount()

• 在组件挂载到DOM之前触发，可用于执行依赖于模板编译结果但不依赖于真实DOM的操作。

1.2.3、onMounted()

• 组件渲染并插入到DOM树后触发，这时可以安全地访问和操作DOM元素或与第三方库交互。

1.2.4、onBeforeUpdate()

• 当组件的数据发生变化且即将进行重新渲染时触发，在此阶段可以做一些更新前的准备工作。

1.2.5、onUpdated()

• 组件完成数据更新和DOM重新渲染后触发，此时可以基于新的DOM状态进行操作。

1.2.6、onBeforeUnmount()

• 组件卸载前触发，用于清理在组件生命周期内注册的各种资源，比如解绑事件、清理定时器等。

1.2.7、onUnmounted()

• 组件完全从DOM中卸载并且所有相关资源已经清除之后触发。

1.2.8、其他

• 除了上述基本生命周期钩子，还有针对特定场景的钩子，例如：

• • onActivated() 和 onDeactivated()：在Suspense和Keep-Alive场景下激活和失活时触发。
  • onErrorCaptured()：全局错误捕获钩子，用于处理整个组件树中未被捕获的错误。

此外，Vue3通过Composition API提供了更细粒度的副作用管理工具，例如：

• watchEffect()：立即执行，并在依赖变化时重新运行。
• watch()：观察特定响应式值的变化并作出反应。

二、vue2 和 vue3的生命周期有什么区别

2.1、Setup Hook

• Vue 2 中，组件的初始化通过一系列声明周期钩子完成，如 beforeCreate、created、beforeMount 等。
• Vue 3 引入了 setup() 钩子函数作为新组件API的核心部分，它合并了 Vue 2 中的部分创建阶段的钩子，并且在这个钩子里可以访问响应式数据（ref 和 computed）以及执行副作用操作。setup() 在组件实例被创建之后但在渲染之前调用，而且不能直接访问到 this 上下文。

2.2、选项式 API 变化

• Vue 3 中，除了 setup()，其他的生命周期钩子仍然存在，但它们现在可以直接作为组件选项导出，而不是定义在类或对象的方法中。
• Vue 3 不再支持 beforeDestroy 生命周期，取而代之的是 beforeUnmount，用于在组件卸载前执行清理工作。

2.3、新增与变更的生命周期钩子

• Vue 3 新增了 onBeforeUpdate 和 onUpdated，分别对应更新前后的钩子，这两个钩子在 Vue 2 中虽然功能存在，但没有对应的明确命名的生命周期方法。
• Vue 3 还引入了 onBeforeUnmount 和 onUnmounted，用来替换 Vue 2 中的 beforeDestroy 和 destroyed。
• Vue 3 中还有与反应性相关的 onRenderTracked 和 onRenderTriggered，用于调试和跟踪响应式依赖变化时触发的渲染过程。

2.4、执行顺序及用法

• Vue 3 中由于 setup() 的引入，导致生命周期钩子的执行逻辑有所变化。setup() 是最早执行的钩子，在其内部无法访问 data、methods 等传统选项，而是需要通过返回值或显式调用 watch、onMounted 等组合式API来操作DOM或者处理异步逻辑。

Vue 3 更注重于函数式的编程范式，借助 Composition API 提供了更灵活的方式来管理组件的状态和生命周期逻辑。

同时，Vue 3 对生命周期钩子进行了精简和补充，使其更加符合现代前端开发需求。

三、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注✨，一起加油☕