【vue3|第13期】深入了解Vue3生命周期：管理组件的诞生、成长与消亡

news2024/10/7 17:29:55

日期：2024年6月22日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

文章目录

一、前言
二、组件的生命周期是什么？
三、组件的生命周期各个阶段
- 1、创建阶段：
- 2、挂载阶段：
- 3、更新阶段：
- 4、卸载阶段：
四、vue2和vue3生命周期的对比
五、如何使用生命周期钩子函数
- 1、选项式示例
- 2、组合式示例
六、总结

在这里插入图片描述

一、前言

在 Vue.js 的世界中，生命周期更像是一段旅程，从出生到成长，再到衰老和最终的归宿。在开发应用程序时，组件的生命周期管理是一个非常重要的环节。正确地使用生命周期钩子，可以帮助我们更好地了解组件从创建、运行到卸载的过程，从而实现对组件状态的合理控制。

二、组件的生命周期是什么？

简单来说，生命周期就是一个组件从创建到卸载的整个过程。在这个过程中，Vue3 为我们提供了一系列的钩子函数，让我们可以在不同阶段介入并进行相应的处理。

三、组件的生命周期各个阶段

1、创建阶段：

setup()：这是Vue3新增的生命周期钩子，用于替代Vue2中的 beforeCreate 和 created 钩子。在组件被创建之前，setup() 函数会被执行。它是响应式系统的入口，可以在其中声明响应式状态、计算属性、方法等。

2、挂载阶段：

onBeforeMount()：组件挂载到 DOM 之前执行。此时，模板已经编译完成，但尚未挂载到实际的 DOM 元素上。
onMounted()：组件挂载到 DOM 后执行。此时，组件已经渲染到实际的DOM元素上，可以执行DOM操作。

3、更新阶段：

onBeforeUpdate()：在组件的数据发生变化，但尚未重新渲染 DOM 之前执行。此时，可以访问到更新前的 DOM 元素。
onUpdated()：组件重新渲染 DOM 后执行。此时，组件已经完成了更新，可以访问到更新后的 DOM 元素

4、卸载阶段：

onBeforeUnmount()：在组件即将被卸载之前执行。此时，组件仍然完全可用，但即将被销毁。
onUnmounted()：组件被卸载后执行。此时，组件已经被销毁，所有的事件监听器、子组件等都被移除。

四、vue2和vue3生命周期的对比

网上资料层次不齐，有些vue2和vue3的生命周期混乱一锅炖，所以这里我给大家整理了一份生命周期对比图，希望可以让各位老铁不再为其所困惑。
在这里插入图片描述
Vue 3 的设计确实令人欣赏，其组件的卸载与挂载过程体现了设计上的严谨性和美感，这种“前后呼应”的对称美不仅提高了开发效率，也增强了代码的可读性和可维护性。

五、如何使用生命周期钩子函数

在Vue3中，我们可以使用选项API或组合API来访问和使用生命周期钩子函数。在使用选项API时，我们可以直接在组件选项中定义生命周期钩子函数。而在使用组合API时，我们需要从Vue中导入相应的生命周期钩子函数，并在setup()函数中使用它们。

1、选项式示例

<script>  
export default {  
  beforeMount() {  
    // 组件挂载前的行为  
  },  
  mounted() {  
    // 组件挂载后的行为  
  },  
  beforeUpdate() {  
    // 组件更新前的行为  
  },  
  updated() {  
    // 组件更新后的行为  
  },  
  beforeUnmount() {  
    // 组件卸载前的行为  
  },  
  unmounted() {  
    // 组件卸载后的行为  
  },  
  // 其他选项如 data、methods、computed 等...  
};  
</script>  
  
<style>  
/* 组件样式 */  
</style>

2、组合式示例

export default + setup()

<script>
import { onBeforeCreate, onCreated, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      // 组件挂在前的行为
    });

    onMounted(() => {
      // 组件挂在后的行为
    });

    onBeforeUpdate(() => {
      // 组件更新前的行为
    });

    onUpdated(() => {
      // 组件更新后的行为
    });

    onBeforeUnmount(() => {
      // 组件卸载前的行为
    });

    onUnmounted(() => {
      // 组件卸载后的行为
    });
  }
};
</script>

<script setup>

<script setup>
import { onBeforeCreate, onCreated, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

onBeforeMount(() => {
  // 组件挂在前的行为
});

onMounted(() => {
  // 组件挂在后的行为
});

onBeforeUpdate(() => {
  // 组件更新前的行为
});

onUpdated(() => {
  // 组件更新后的行为
});

onBeforeUnmount(() => {
  // 组件卸载前的行为
});

onUnmounted(() => {
  // 组件卸载后的行为
});
</script>