Vue组件首次显示时渲染，隐藏时不销毁的实现方案问询

可以通过结合v-if控制首次渲染时机，v-show控制后续显示隐藏来实现你的需求，核心思路是：让第二个标签的组件只在第一次被选中时渲染，之后切换标签只做显示/隐藏操作，不销毁组件。

具体实现步骤（Vue 3 选项式为例） #

1. 定义状态变量：

data() {
  return {
    activeTab: 'tab1', // 当前激活的标签
    isTab2Rendered: false // 标记第二个标签的组件是否已渲染
  }
}

2. 标签切换方法：

methods: {
  switchTab(tab) {
    this.activeTab = tab;
    // 如果切换到第二个标签且还没渲染过，等待组件渲染完成后标记状态
    if (tab === 'tab2' && !this.isTab2Rendered) {
      this.$nextTick(() => {
        this.isTab2Rendered = true;
      });
    }
  }
}

3. 模板结构：

<template>
  <div class="tabs">
    <button @click="switchTab('tab1')" :class="{active: activeTab === 'tab1'}">标签1</button>
    <button @click="switchTab('tab2')" :class="{active: activeTab === 'tab2'}">标签2</button>

    <!-- 第一个标签：直接用v-show控制显示隐藏 -->
    <div class="tab-content" v-show="activeTab === 'tab1'">
      <Tab1Component />
    </div>

    <!-- 第二个标签：容器用v-show控制显示，内部组件用v-if确保首次渲染时机 -->
    <div class="tab-content" v-show="activeTab === 'tab2'">
      <Tab2Component v-if="activeTab === 'tab2' || isTab2Rendered" />
    </div>
  </div>
</template>

原理说明 #

• 首次切换到标签2时，activeTab === 'tab2'满足，v-if触发Tab2Component渲染，此时父容器tab-content是显示状态（因为v-show="activeTab === 'tab2'"），组件能正确获取父元素高度，解决样式异常问题。
• 组件渲染完成后，isTab2Rendered被设为true，之后再切换标签，Tab2Component的v-if条件始终满足（因为isTab2Rendered为true），仅通过父容器的v-show控制显示/隐藏，组件不会被销毁，滚动位置等状态得以保留。

补充：如果是Vue 3 组合式API #

写法类似，用ref定义状态：

import { ref, nextTick } from 'vue';

const activeTab = ref('tab1');
const isTab2Rendered = ref(false);

const switchTab = async (tab) => {
  activeTab.value = tab;
  if (tab === 'tab2' && !isTab2Rendered.value) {
    await nextTick();
    isTab2Rendered.value = true;
  }
};

模板部分和选项式一致，模板中访问ref状态可省略.value。

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