Vue3组件加载顺序

父组件：QualityFile.vue

<script setup lang="ts" name="QualityFile">
......
</script>

<template>
  <el-container class="container">
    <el-header class="header">
      <!-- 标题 -->
      <div class="header-title">
        <span>{{ store.moduleName }}</span>
        <el-dropdown split-button trigger="hover" @click="onSetColumnWidthClick">
          设置列宽
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="onResetColumnWidthClick">重置列宽</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <!-- 操作栏 -->
      <QualityFileOperation ref="qualityFileOperationRef" @add-click="onAddClick" />
    </el-header>
    <el-main class="main">
      <!-- 展示区 -->
      <el-container class="content-container">
        <!-- 展示区侧边栏，分类树 -->
        <el-aside class="content-container-aside">
          <QualityFileCategoryTree />
        </el-aside>
        <!-- 展示区主内容，列表数据 -->
        <el-main class="content-container-main">
          <QualityFileTable
            ref="qualityFileTableRef"
            @modify-click="onModifyClick"
            @download-click="onDownloadClick"
            @delete-click="onDeleteClick" />
        </el-main>
      </el-container>
    </el-main>
    <el-footer class="footer"> </el-footer>
  </el-container>
  <div>
    <!-- 质量体系文件修改模态框 -->
    <QualityFileInfoDialog
      ref="qualityFileInfoDialogRef"
      :is-new="store.isNew"
      :quality-file-info="store.currentSelectedRow"
      @confirm-quality-file="handleConfirmQualityFile"
      @upload-file-complete="handleUploadFileComplete"
      @download-file="onDownloadClick"
      @clear-file="handleClearFile" />
  </div>
</template>

组件挂载 onMounted 与 卸载 onUnmounted 的顺序