vue onmounted

<template>
  <div>
    <!-- 组件的模板内容 -->
  </div>
</template>

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

// 使用 onMounted 钩子
onMounted(() => {
  // 这里的代码会在组件挂载后执行
  console.log('组件已经挂载到 DOM 中了');

  // 可以在这里进行一些初始化操作，比如获取数据、设置定时器等
  fetchData();

  // 示例：设置一个定时器
  const timer = setInterval(() => {
    console.log('每秒执行一次');
  }, 1000);

  // 返回一个函数用于清理副作用（例如清除定时器）
  return () => clearInterval(timer);
});

// 模拟一个异步数据获取函数
function fetchData() {
  console.log('正在获取数据...');
  // 模拟异步请求
  setTimeout(() => {
    console.log('数据获取完成');
  }, 2000);
}
</script>

<style scoped>
/* 组件的样式 */
</style>

解释说明

• onMounted 是 Vue 3 Composition API 中的一个生命周期钩子，它会在组件挂载完成后执行。
• 在 onMounted 回调中，你可以执行一些需要在 DOM 渲染之后的操作，比如发起网络请求、操作 DOM 元素、设置定时器等。
• 如果你在 onMounted 中创建了一些副作用（例如定时器），可以通过返回一个清理函数来确保这些副作用在组件卸载时被正确清理，避免内存泄漏。