Vue ref如何管理选项卡切换组件的当前激活索引状态

在 Vue 中使用 ref 管理选项卡切换，关键是先声明一个响应式索引变量 const activeIndex = ref(0)。当用户点击不同选项卡时，通过 activeIndex.value = index 更新当前激活状态，再结合 :class 或 v-if 来控制样式切换以及内容的显示与隐藏；如果数据结构不止一层，tabs 列表还可以配合 reactive 进行统一管理。

用 ref 处理选项卡组件中的当前激活索引，本质上就是创建一个响应式数字变量，并在点击切换时及时更新它，同时结合模板中的条件渲染或类名绑定，控制 Tab 的视觉激活状态和对应内容区域的展示。

用 ref 声明当前激活索引

在 setup 中通过 ref 创建一个初始值为 0 的响应式索引变量，这是 Vue 处理 Tab 当前选中项的常见做法。它非常适合存储基本类型，数值变化后会自动驱动视图更新：

• const activeIndex = ref(0) —— 默认让第一个 Tab 处于激活状态
• 如果只管理单个数字索引，一般不需要使用 reactive，因为 ref 更轻量也更直观
• 在模板中可直接写 {{ activeIndex }}，Vue 会自动解包；但在脚本中修改时必须使用 activeIndex.value = 1

绑定 Tab 标签的激活样式

通常会遍历 tab 列表，借助 v-for 渲染每个选项卡标签，并通过动态 class 或样式判断当前是否高亮显示：

• 给每个 或

  绑定 :class="{ 'active': index === activeIndex.value }"，用于控制激活态样式

• 也可以使用内联样式，例如：:style="{ opacity: index === activeIndex.value ? 1 : 0.6 }"
• 需要注意的是，在脚本逻辑或显式比较时要使用 activeIndex.value，不要遗漏 .value

切换时更新 ref 值并联动内容

每个 Tab 标签都可以绑定 @click 事件，传入对应索引后直接更新 ref 的值，从而实现选项卡切换与内容联动：

• @click="activeIndex.value = index" —— 写法简洁，逻辑清晰，通常无需额外封装函数
• 对应内容区域可以通过 v-if 或 v-show 控制显示与隐藏，例如：v-if="activeIndex.value === 0"
• 如果内容区域较复杂或渲染开销较大，建议优先考虑 v-show 以避免频繁销毁和挂载；若还需要保留组件内部状态，可进一步结合

进阶：配合 reactive 管理多维 Tab 数据

当选项卡不仅包含标题，还涉及内容、图标、描述等多种字段时，可以使用 reactive 统一管理数据列表，而 ref 继续专注于控制当前激活索引：

• const tabs = reactive([{ title: '用户', content: '...' }, { title: '设置', content: '...' }])
• const activeIndex = ref(0) 单独负责记录当前选中的 Tab 项
• 模板中可通过 tabs[activeIndex.value].content 渲染当前内容，这种写法结构清楚，也能保证响应式更新正常生效