在 Vue 3 中，组件的生命周期钩子提供了在组件的不同阶段执行代码的机会。以下是 Vue 3 的生命周期钩子及其说明：

1. 生命周期钩子的概述

Vue 3 提供了多个生命周期钩子，允许我们在组件的创建、更新和销毁等不同阶段运行代码。它们按照组件的生命周期顺序执行。

2. 生命周期钩子列表

以下是 Vue 3 中常用的生命周期钩子：

1. 创建阶段

• beforeCreate

  • 在实例被创建之后、数据观测和事件配置之前被调用。

• created

  • 在实例被创建之后，数据观测和事件配置完成时被调用。此时可以访问 data、computed、methods 及 props。

2. 挂载阶段

• beforeMount

  • 在挂载开始之前被调用，此时模板已被编译为虚拟 DOM，但还没有挂载到真实 DOM。

• mounted

  • 在挂载完成并挂载到真实 DOM 后立即调用。可以在这里进行操作，比如与外部 DOM 进行交互。

3. 更新阶段

• beforeUpdate

  • 在数据更新之前被调用。在此阶段，可以访问旧的 VNode 和新的 VNode。

• updated

  • 在数据更新并重新渲染后调用。

4. 销毁阶段

• beforeUnmount

  • 在组件实例销毁之前调用。在此阶段，可以执行一些清理操作，比如清理定时器或事件监听器。

• unmounted

  • 在组件实例销毁后调用，此时组件的所有作用域都已清理。

3. 使用生命周期钩子

在 Vue 3 中，通过 setup 函数使用生命周期钩子，可以使用 onLifecycleHook 系列 API。

示例代码

<template>
  <div>
    <h1>Hello, Vue 3!</h1>
  </div>
</template>

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

export default {
  setup() {
    onBeforeCreate(() => {
      console.log('beforeCreate');
    });
    
    onCreated(() => {
      console.log('created');
    });
    
    onBeforeMount(() => {
      console.log('beforeMount');
    });
    
    onMounted(() => {
      console.log('mounted');
    });
    
    onBeforeUpdate(() => {
      console.log('beforeUpdate');
    });
    
    onUpdated(() => {
      console.log('updated');
    });
    
    onBeforeUnmount(() => {
      console.log('beforeUnmount');
    });
    
    onUnmounted(() => {
      console.log('unmounted');
    });
  }
};
</script>

4. 总结

• Vue 3 的生命周期钩子可以帮助开发者在组件的不同阶段执行特定逻辑。
• 可以在 setup 函数中通过 on 系列方法使用生命周期钩子。
• 理解这些生命周期钩子的每一个阶段对于管理组件的状态和资源是非常重要的。

这些生命周期钩子为你提供了灵活性，以便在合适的时机执行相应的操作。

标签： 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。