Vue 3 中的生命周期

Vue 3 中的生命周期

要知道Vue3中的生命周期如何使用,先要明白Vue2中的生命周期如何使用

Vue2生命周期

Vue 2中的生命周期钩子函数分为8个阶段，分别是：

1. beforeCreate: 在实例被创建之前执行，此时数据观测和初始化都未开始。
2. created: 在实例创建完成后执行，此时已完成数据观测并且所有的属性和方法都已经建立完成。
3. beforeMount: 在挂载之前被调用，此时模板编译已完成，但尚未将编译得到的内容替换到HTML文档中。
4. mounted: 在挂载之后被调用，此时实例已完成挂载并且可以访问到DOM元素。
5. beforeUpdate: 在更新之前被调用，此时数据已更新但尚未重新渲染DOM。
6. updated: 在更新之后被调用，此时数据已更新且DOM已重新渲染。
7. beforeDestroy: 在实例销毁之前调用，此时实例仍然完全可用。
8. destroyed: 在实例销毁之后调用，此时实例所有的属性和方法都已经被删除，DOM元素也已经被销毁。

需要注意的是，Vue 2中的生命周期钩子函数只是在组件生命周期的不同阶段被调用，开发者可以在这些钩子函数中执行自己的逻辑。同时，Vue 2中的生命周期钩子函数并不是必须的，开发者可以选择只使用部分钩子函数或者不使用钩子函数。但是，钩子函数的执行顺序是固定的，不能随意更改。

Vue3 生命周期

Vue 3中的生命周期钩子函数相对于Vue 2有了一些变化，以下是Vue 3中的生命周期钩子函数：

1. beforeCreate: 在实例被创建之前执行，此时数据观测和初始化都未开始。
2. created: 在实例创建完成后执行，此时已完成数据观测并且所有的属性和方法都已经建立完成。
3. beforeMount: 在挂载之前被调用，此时模板编译已完成，但尚未将编译得到的内容替换到HTML文档中。
4. mounted: 在挂载之后被调用，此时实例已完成挂载并且可以访问到DOM元素。
5. beforeUpdate: 在更新之前被调用，此时数据已更新但尚未重新渲染DOM。
6. updated: 在更新之后被调用，此时数据已更新且DOM已重新渲染。
7. beforeUnmount: 在卸载之前被调用，此时实例仍然完全可用。
8. unmounted: 在卸载之后被调用，此时实例已被完全卸载，所有的事件监听器和子组件实例都已经被删除。

需要注意的是，Vue 3中不再支持beforeDestroy和destroyed钩子函数，取而代之的是beforeUnmount和unmounted。此外，Vue 3中的生命周期钩子函数采用了更加直观的命名方式，使得开发者更容易理解和使用。

注意！！！：Vue3的生命周期钩子函数，和setup（）函数是平级的，只有销毁阶段有所不同；Vue3的组合式生命周期，是写在setup（）函数里面的

Vue3的组合式生命周期

注意！！：Vue3的组合式生命周期每一个阶段都要比Vue3的生命周期先执行

在Vue 3中，组合式API是一种新的API风格，可以让我们更好地组织和重用组件逻辑。与Vue 2的选项式API不同，组合式API没有像created、mounted、beforeUpdate等生命周期钩子函数，而是采用了一种新的组合式生命周期的方式。 组合式生命周期是通过onXXX函数来实现的，其中XXX代表不同的阶段，以下是Vue 3中的组合式生命周期：

1. onBeforeMount: 在挂载之前被调用，此时模板编译已完成，但尚未将编译得到的内容替换到HTML文档中。
2. onMounted: 在挂载之后被调用，此时实例已完成挂载并且可以访问到DOM元素。
3. onBeforeUpdate: 在更新之前被调用，此时数据已更新但尚未重新渲染DOM。
4. onUpdated: 在更新之后被调用，此时数据已更新且DOM已重新渲染。
5. onBeforeUnmount: 在卸载之前被调用，此时实例仍然完全可用。
6. onUnmounted: 在卸载之后被调用，此时实例已被完全卸载，所有的事件监听器和子组件实例都已经被删除。

在组合式API中，我们可以按照自己的需要组织和重用组件逻辑，并且可以根据不同的生命周期阶段来执行相应的逻辑。与选项式API相比，组合式API可以让我们更好地理解和控制组件的生命周期，提高了代码的可维护性和可读性。

Vue3的组合式生命周期钩子函数，写在setup()函数里面

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!