vue3解决切换tab页每次切换加载数据导致数据缓慢问题

const tabchange=e=>{
   
   
data.activity = e
vedioLoad(data.activity)//加载数据 加载的时候传值过去
}

解决方法：
使用标识符来进行辨认 有两个tab页 搞个动态加载 在开头的vedioload还没开始加载的时候判断是否加载过 入股已经加载过 则返回 不要重新加载

loadvideos会根据loadedTabs的状态决定是否需要加载数据

改动

videos.value = filterSelectData 改为
 videos.value[videoTypeFilter] = filterSelectData;

由标签页的离线和在线数据 都分开管理 使用两个列表：即一个数组两个对象进行存储 数组的下标有tab0 tab1 动态决定 代替原来的直接覆盖数据

const loadVideos = (videoTypeFilter) => {
   
   
  if (loadedTabs.value[videoTypeFilter]) {
   
   
    // 如果数据已经加载过了，直接返回
    data.loading = false;
    return;
  }
  // 数据尚未加载，执行加载逻辑
  // ...加载数据的代码...
  loadedTabs.value[videoTypeFilter] = true; // 数据加载完成后，设置为true
}

const tabsChange = e => {
   
   
  data.activeKey = e;
  loadVideos(data.activeKey); // 调用loadVideos来加载数据
};

单页全部代码

<!-- 宣传教育 -->


<template>
  <div class="video-section">

    <div class="box-header block-interval">


      <div class="title">
        <a-tabs v-model:activeKey="activeKey" @change="tabsChange">
          <a-tab-pane key=1 tab="在线" />
          <a-tab-pane key=0 tab="离线" />
        </a-tabs>
      </div>

      
    </div>



    <div class="backcolor">
      <div class="search-bar">
        <!-- 搜索 -->
        <a-form-item label="视频课程:">
          <a-input v-model:value="where.videoTitle" placeholder="请搜索视频课程" allow-clear />
        </a-form-item>
        <a-button type="primary" @click="reload" class="searchBtn">
          <img src="@/assets/icon/archives/select.png" alt="" class="searchIcon" />
          查询
        </a-button>
      </div>
      <a-spin :spinning="loading">
        <div class="video-gallery">
          <div v-for="video in videosForCurrentTab" :key="video.id">
            
            <div class="video-container">
              <video :id="`video-${video.id}`" controls muted class="video-player">
                <source