组件多状态切换需分层管理：局部状态用ref，结构化状态用reactive，动态组件+keep-alive缓存，复杂逻辑抽为composable，复用组件确保状态隔离。
组件内部的多状态切换，核心是把“谁在控制状态”和“状态怎么流转”理清楚。不是堆逻辑，而是分层管理：局部状态归局部，共享逻辑抽离复用，频繁切换优先缓存。
用 reactive 或 ref 管理独立状态块
多个开关、标签页、折叠面板、表单步骤等并存时，别全塞进一个对象里硬维护。按功能域拆开，各自独立响应：
- 用 ref 管理布尔型开关（如 isModalOpen、isEditing）
- 用 reactive 封装结构化状态（如 tabState = { active: 'detail', history: ['list', 'detail'] }）
- 避免直接修改 props，需要变更时 emit 通知父组件，保持单向数据流
Tab 切换类场景优先用 <component :is="currentComp"> + keep-alive
当多个子组件按需切换（比如详情页、日志页、配置页），不用 v-if 写一长串判断。动态组件更干净：
- 定义组件映射表：
const tabs = { Detail: DetailView, Log: LogView, Config: ConfigView } - 用
<component :is="tabs[currentKey]" :key="currentKey" />切换 - 套上
<keep-alive>缓存已渲染实例，避免重复初始化和请求 - 配合
activated/deactivated钩子做页面级生命周期控制（如恢复滚动位置、暂停轮询）
状态逻辑复杂时，提取为组合式函数（composable）
如果同一套切换逻辑（比如多步骤表单的状态机、权限驱动的 UI 分支）在多个组件中重复出现，就该抽成 useXXX：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 封装状态变量（step、errors、canNext）、计算属性（isFirstStep、nextDisabled）和方法（goNext、reset）
- 接收必要参数（如初始 step、校验规则），返回解构后的响应式状态和操作函数
- 组件内只需
const { step, goNext, reset } = useMultiStep({ initial: 1 })，逻辑彻底解耦
避免状态污染与意外共享
组件被多次复用时（如列表中每个 item 渲染一个带开关的 Card），状态必须隔离：
- data 必须是函数返回对象，不能写成对象字面量，否则所有实例共用一份
- 每个实例的状态 key 要带唯一标识（如
cardStates[id] = { expanded: false, loading: false }） - 不要在 setup 中直接引用全局或父级 ref，除非明确需要联动；否则用 props + emit 控制边界
不复杂但容易忽略。关键是让每个状态都有明确归属，有来路、有去向、有边界。
