当前位置：首页 > news >正文

【前端】Tab切换时的数据重置与加载策略技术文档

news 2025/7/30 15:47:52

概述

在具有多级Tab切换功能的应用中，当用户切换Tab时需要正确处理数据的生命周期。本文档详细描述如何实现watch(() => tabStore.activeSubTab, ...)这一关键模式，该模式负责在Tab切换时重置分页状态、清空旧数据并触发新数据加载。

核心实现

watch(() => tabStore.activeSubTab, // 监听当前活动Tab的变化(newTab) => {// 1. 重置分页状态page.value = 1;// 2. 清空旧数据dataList.value = [];// 3. 触发新数据加载loadMoreData();}
);

功能分解

1. 状态重置的必要性

状态	重置原因	不重置的后果
分页(page)	每个Tab应从第一页开始加载	新Tab会延续旧Tab的页码，导致数据错乱
数据列表	避免新旧Tab数据混杂	用户看到不相关的混合数据
加载状态	中断旧Tab的加载，准备新Tab加载	请求冲突，可能导致UI状态异常

2. 实现细节优化

2.1 添加防抖处理（避免快速切换问题）

import { debounce } from 'lodash-es';// 创建带防抖的加载函数
const debouncedLoad = debounce(() => {loadMoreData();
}, 300);watch(() => tabStore.activeSubTab,(newTab) => {page.value = 1;dataList.value = [];// 使用防抖版本debouncedLoad();// 取消可能的待处理请求debouncedLoad.cancel();}
);

2.2 请求取消机制（防止竞态条件）

let abortController = null;const loadMoreData = async () => {// 取消前一个请求abortController?.abort();abortController = new AbortController();try {const response = await fetch(`/api/data?tab=${tabStore.activeSubTab}`, {signal: abortController.signal});// 处理响应...} catch (err) {if (err.name !== 'AbortError') {// 处理真实错误}}
};watch(() => tabStore.activeSubTab, () => {// 切换时取消所有待处理请求abortController?.abort();// ...其他重置逻辑
});

3. 生命周期管理

组件挂载时

onMounted(() => {// 初始加载当前Tab数据loadMoreData();
});

组件卸载时

onUnmounted(() => {// 1. 取消所有待处理请求abortController?.abort();// 2. 清理防抖函数debouncedLoad.cancel();// 3. 重置组件状态page.value = 1;dataList.value = [];
});

性能优化策略

1. 数据缓存实现

// 在Pinia store中添加缓存
const tabDataCache = reactive({});watch(() => tabStore.activeSubTab,(newTab) => {// 检查缓存if (tabDataCache[newTab]) {dataList.value = tabDataCache[newTab].data;page.value = tabDataCache[newTab].page;} else {// 无缓存则重置加载resetAndLoad();}}
);// 在加载函数中更新缓存
const loadMoreData = async () => {// ...加载数据tabDataCache[tabStore.activeSubTab] = {data: dataList.value,page: page.value};
};

2. 请求合并技术

let currentRequestId = 0;const loadMoreData = async () => {const requestId = ++currentRequestId;// ...加载数据// 检查是否为最新请求if (requestId !== currentRequestId) {console.log('过时请求被忽略');return;}// 处理响应...
};

错误处理与边界情况

1. 处理网络异常

const loadMoreData = async () => {try {// ...请求逻辑} catch (error) {if (error.name === 'AbortError') {console.log('请求被取消');} else {// 显示错误提示showErrorToast(`加载失败: ${error.message}`);// 重试机制if (retryCount < 3) {setTimeout(() => loadMoreData(), 2000);retryCount++;}}}
};

2. 空状态处理

<template><div v-if="dataList.length === 0 && !isLoading"><EmptyState :tab="tabStore.activeSubTab" /></div>
</template>

完整示例代码

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { useTabStore } from '@/stores/tabStore';
import { debounce } from 'lodash-es';const tabStore = useTabStore();
const page = ref(1);
const dataList = ref([]);
const isLoading = ref(false);
let abortController = null;
let currentRequestId = 0;// 带防抖的加载函数
const debouncedLoad = debounce(loadMoreData, 300);// Tab切换监听
watch(() => tabStore.activeSubTab,(newTab) => {// 取消待处理操作abortController?.abort();debouncedLoad.cancel();// 重置状态page.value = 1;dataList.value = [];currentRequestId++;// 触发新加载debouncedLoad();}
);// 数据加载函数
async function loadMoreData() {if (isLoading.value) return;try {isLoading.value = true;const requestId = ++currentRequestId;// 取消前一个请求abortController?.abort();abortController = new AbortController();const response = await fetch(`/api/data?tab=${tabStore.activeSubTab}&page=${page.value}`,{ signal: abortController.signal });// 检查是否为最新请求if (requestId !== currentRequestId) return;const newData = await response.json();// 检查Tab是否已切换if (tabStore.activeSubTab !== newData.tab) {console.warn('数据与当前Tab不匹配');return;}dataList.value = [...dataList.value, ...newData.items];page.value++;} catch (err) {if (err.name !== 'AbortError') {console.error('加载失败', err);}} finally {isLoading.value = false;}
}onMounted(() => {// 初始加载loadMoreData();
});onUnmounted(() => {// 清理资源abortController?.abort();debouncedLoad.cancel();
});
</script>