介绍一下`onMounted`和`onUnmounted`的用法

介绍一下onMounted和onUnmounted的用法

在 Vue 3 中，onMounted 和 onUnmounted 是两个生命周期钩子函数，它们分别在组件挂载到 DOM 后和卸载前的阶段被调用。这些钩子函数在 Composition API 中使用，提供了一种在组件生命周期的特定时刻执行代码的方式。本文将介绍这两个钩子函数的用法，并提供使用 setup 语法糖的示例代码。

onMounted 的用法

onMounted 钩子函数在组件实例被挂载到 DOM 后调用。这通常是执行 DOM 相关操作、执行副作用、或者设置定时器的好时机。

示例代码

<template>
  <div>
    <p>组件挂载后，这段文本将显示在控制台</p>
    <button @click="doSomething">点击我</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const count = ref(0);

// 在组件挂载后执行
onMounted(() => {
  console.log('组件已挂载');
  // 可以执行 DOM 操作或设置定时器等
  document.title = '组件已挂载';
});

// 示例方法
const doSomething = () => {
  count.value++;
  console.log(`按钮点击了 ${count.value} 次`);
};
</script>

在这个示例中，onMounted 钩子函数用于在组件挂载后立即执行一些操作，如修改文档标题。

onUnmounted 的用法

onUnmounted 钩子函数在组件实例卸载之前调用。这通常是清理工作的地方，比如清除定时器、移除事件监听器或者解绑资源。

示例代码

<template>
  <div>
    <p>组件卸载前，这段文本将显示在控制台</p>
    <button @click="unmountComponent">卸载组件</button>
  </div>
</template>

<script setup>
import { onUnmounted, ref } from 'vue';

const timer = ref(null);

// 设置定时器
const startTimer = () => {
  timer.value = setInterval(() => {
    console.log('定时器运行中...');
  }, 1000);
};

// 清理定时器
const clearTimer = () => {
  if (timer.value) {
    clearInterval(timer.value);
  }
};

// 在组件挂载后设置定时器
onMounted(() => {
  startTimer();
});

// 在组件卸载前清理定时器
onUnmounted(() => {
  clearTimer();
  console.log('组件已卸载');
});

// 示例方法，用于卸载组件
const unmountComponent = () => {
  // 这里可以执行一些操作来卸载组件
  // 例如使用 Vue 3 的 <Teleport> 或者动态组件等
};
</script>

在这个示例中，onUnmounted 钩子函数用于在组件卸载前清理定时器，以避免内存泄漏。

总结

onMounted 和 onUnmounted 是 Vue 3 中两个非常有用的生命周期钩子函数，它们分别在组件挂载和卸载的阶段被调用。通过使用这些钩子函数，你可以在适当的时机执行代码，如设置定时器、执行 DOM 操作或清理资源。使用 setup 语法糖可以使代码更加简洁和易于维护。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情