vue-pure-admin生命周期：Vue3组合式API生命周期钩子使用

【免费下载链接】vue-pure-admin 全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端） 项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin

还在为Vue3组合式API的生命周期钩子使用而困惑吗？本文将深入解析vue-pure-admin项目中Vue3生命周期钩子的实战应用，通过真实项目案例带你掌握组合式API的精髓。

读完本文你将获得

• ✅ Vue3组合式API生命周期钩子完整解析
• ✅ vue-pure-admin项目中的实战应用案例
• ✅ 生命周期钩子的最佳实践和常见陷阱
• ✅ 组件销毁时的资源清理策略
• ✅ 异步操作与生命周期的完美结合

Vue3生命周期钩子概览

Vue3的组合式API提供了8个主要的生命周期钩子函数，它们分别在组件生命周期的不同阶段被调用：

生命周期钩子	组合式API函数	执行时机	主要用途
创建前	-	组件实例初始化前	Options API专用
创建后	-	组件实例创建完成	Options API专用
挂载前	onBeforeMount	DOM挂载之前	访问DOM前的准备工作
挂载后	onMounted	DOM挂载完成后	访问DOM、发起请求、设置定时器
更新前	onBeforeUpdate	数据变化，DOM更新前	获取更新前的DOM状态
更新后	onUpdated	数据变化，DOM更新后	执行依赖于更新后DOM的操作
卸载前	onBeforeUnmount	组件卸载前	清理定时器、取消订阅、移除事件监听
卸载后	onUnmounted	组件卸载后	最终清理工作
错误捕获	onErrorCaptured	捕获子孙组件错误	错误处理和上报

vue-pure-admin中的生命周期实战

1. onMounted - 组件挂载后的初始化

在音频可视化组件中，onMounted用于初始化WaveSurfer.js音频播放器：

<script setup lang="ts">
import WaveSurfer from "wavesurfer.js";
import { ref, onMounted, onBeforeUnmount } from "vue";

const wavesurfer = ref(null);
const wavesurferRef = ref();

function init() {
  wavesurfer.value = WaveSurfer.create({
    container: wavesurferRef.value,
    height: "auto",
    waveColor: "rgb(200, 0, 200)",
    progressColor: "rgb(100, 0, 100)",
    url: `${import.meta.env.VITE_PUBLIC_PATH}audio/海阔天空.mp3`
  });

  // 音频事件监听
  wavesurfer.value.on("ready", () => {
    console.log("音频准备就绪");
  });
}

onMounted(init);
</script>

2. onBeforeUnmount - 组件卸载前的清理

MQTT客户端组件使用onBeforeUnmount确保连接正确关闭：

<script setup lang="ts">
import * as mqtt from "mqtt/dist/mqtt.min";
import { reactive, ref, onUnmounted } from "vue";

let client = ref({} as mqtt.MqttClient);

// MQTT连接创建逻辑
const createConnection = () => {
  client.value = mqtt.connect(connectUrl, options);
};

onUnmounted(() => {
  try {
    if (client.value.end) {
      client.value.end();
      console.log("MQTT连接已安全断开");
    }
  } catch (error) {
    console.log("断开连接时发生错误:", error);
  }
});
</script>

3. onBeforeMount - 挂载前的主题设置

账户设置页面使用onBeforeMount在DOM挂载前设置主题：

<script setup lang="ts">
import { ref, onBeforeMount } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";

const { $storage } = useGlobal<GlobalPropertiesApi>();

onBeforeMount(() => {
  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
});
</script>

生命周期执行流程详解

最佳实践与常见陷阱

1. 异步操作的正确处理

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getUserData } from "@/api/user";

const userData = ref(null);
const loading = ref(false);

onMounted(async () => {
  loading.value = true;
  try {
    userData.value = await getUserData();
  } catch (error) {
    console.error("获取用户数据失败:", error);
  } finally {
    loading.value = false;
  }
});
</script>

2. 事件监听器的清理

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from "vue";

const handleResize = () => {
  console.log("窗口大小改变");
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

3. 定时器的管理

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";

const timer = ref(null);
const count = ref(0);

onMounted(() => {
  timer.value = setInterval(() => {
    count.value++;
  }, 1000);
});

onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});
</script>

常见问题与解决方案

Q: 为什么在onMounted中访问DOM元素有时为null？

A: 确保模板中的ref名称与脚本中的一致，并且组件已完全挂载。

Q: 如何处理组件卸载时的异步操作？

A: 使用AbortController或标记变量来取消未完成的异步操作。

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";

let isComponentMounted = ref(true);
const abortController = new AbortController();

onMounted(async () => {
  try {
    const response = await fetch('/api/data', {
      signal: abortController.signal
    });
    if (isComponentMounted.value) {
      // 处理数据
    }
  } catch (error) {
    if (error.name !== 'AbortError') {
      console.error('请求失败:', error);
    }
  }
});

onBeforeUnmount(() => {
  isComponentMounted.value = false;
  abortController.abort();
});
</script>

性能优化建议

1. 避免在onUpdated中进行重操作：onUpdated会在每次数据更新后触发，避免在此进行昂贵计算
2. 合理使用onBeforeUnmount：确保所有资源都被正确释放，防止内存泄漏
3. 按需使用生命周期钩子：不是每个组件都需要所有钩子，按实际需求选择

总结

Vue3的组合式API生命周期钩子为开发者提供了更灵活、更清晰的组件生命周期管理方式。通过vue-pure-admin项目的实际案例，我们可以看到：

• onMounted 最适合进行DOM操作和异步数据获取
• onBeforeUnmount 是资源清理的最佳时机
• onBeforeMount 可用于挂载前的配置工作
• 合理使用生命周期钩子可以显著提升应用性能和稳定性

掌握这些生命周期钩子的正确使用方式，将帮助你构建更健壮、更高效的Vue3应用程序。记住，良好的资源管理习惯是前端开发中的重要技能，能够有效避免内存泄漏和性能问题。

如果觉得本文对你有帮助，请点赞、收藏、关注三连支持！下期我们将深入探讨vue-pure-admin的状态管理实践。

【免费下载链接】vue-pure-admin 全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端） 项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin