Vue3向响应式数组添加元素时如何避免DOM元素重复渲染？

核心原因分析 #

你遇到的问题本质是组件被不必要地销毁重建，而非单纯的重新渲染。主要触发点可能有以下几个：

• 同时使用v-if和v-show：v-if的条件依赖函数selected_request(tab.request.id)，每次组件渲染时该函数都会执行，若函数返回值或引用不稳定，会导致v-if条件频繁变化，触发组件销毁重建。
• 模板中直接调用无缓存的函数：selected_request若未做缓存，每次渲染都会重新计算，Vue会认为依赖项变化，进而触发组件更新链。
• 函数型props引用不稳定：比如GetNewToken若未用useCallback包裹，每次渲染都会生成新函数引用，导致子组件感知到props变化，触发不必要的更新。

具体解决方案 #

1. 移除v-if，改用前置过滤确保数据有效性 #

v-show仅控制DOM显示/隐藏，不会销毁组件；而v-if会在条件变化时彻底销毁重建组件。既然你已经用v-show控制标签显示，建议提前过滤无效标签：

// 用计算属性过滤出有效的标签项
const validTabs = computed(() => {
  return tabs.value.filter(tab => selected_request(tab.request.id));
});

模板中遍历过滤后的validTabs，同时移除v-if：

<template v-for="tab in validTabs" :key="tab.id">
  <TabContent
    v-show="tab.id === selected_tab?.id"
    v-model:tab="tab" <!-- 直接绑定tab对象，避免索引依赖 -->
    v-model:api-call-loading="api_call_loading"
    v-model:specs-loading="specs_loading"
    :request="selected_request(tab.request.id)"
    :requests="requests"
    :accounts="accounts"
    :servers="servers"
    :result="result"
    :instance="null"
    :acquire-token="GetNewToken"
  />
</template>

2. 缓存selected_request的查询结果 #

如果selected_request是根据id查找request，建议用Map缓存查询结果，避免每次渲染重复遍历：

const requestMap = computed(() => {
  return new Map(requests.value.map(req => [req.id, req]));
});

// 替换原查询函数
const getRequestById = (id: string) => {
  return requestMap.value.get(id);
};

模板中改用getRequestById(tab.request.id)，提升查询效率的同时保证结果稳定。

3. 稳定函数型props的引用 #

如果GetNewToken是回调函数，用useCallback包裹确保引用不变：

import { useCallback } from 'vue';

const GetNewToken = useCallback(async () => {
  // 你的获取token逻辑
}, []); // 若依赖响应式数据，需添加到依赖数组中

4. 确保tab.id的唯一性和稳定性 #

确认tab.id是唯一且不会动态变化的标识（比如用UUID生成），这是Vue列表渲染中保持组件状态稳定的核心，Vue会通过key识别哪些组件是新增的，哪些是已存在的。

验证效果 #

修改后，向tabs数组push新对象时，Vue会根据key仅挂载新的TabContent组件，旧组件仅会通过v-show调整显示状态，不会触发onMounted钩子，有效避免了不必要的性能消耗。

内容的提问来源于stack exchange，提问作者omega