在 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渲染当前内容，这种写法结构清楚，也能保证响应式更新正常生效
