onMounted多个

在Vue3中，`onMounted`是一个生命周期钩子，用于在组件初次渲染完成后执行一些异步操作，确保DOM已经准备就绪。如果需要执行多个这样的操作，可以在一个`onMounted`回调函数内部链式地调用它们，或者将每个独立的操作封装成单独的函数并分别调用。

例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

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

// 定义变量
const titleData = ref('');
const descriptionData = ref('');

// 分别获取标题和描述数据
async function fetchData() {
  const titleResponse = await fetchTitleData();
  titleData.value = titleResponse.title;

  const descriptionResponse = await fetchDescriptionData();
  descriptionData.value = descriptionResponse.description;
}

// 异步获取数据函数
async function fetchTitleData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ title: '这是标题' }), 1000);
  });
}

async function fetchDescriptionData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ description: '这是描述' }), 2000);
  });
}

// 绑定数据到组件的响应式属性
onMounted(fetchData);
</script>

在这个示例里，`fetchData`函数会在组件加载完成后，先获取标题再获取描述。每个数据请求都用各自的异步操作处理，确保不会同时执行。