vue 3 中用 watch 监听 el-switch 状态联动子表单显隐，需监听绑定的响应式变量（如 ref 定义的 isexpanded），在 watch 回调中更新控制显隐的布尔状态（如 showsubform），模板中用 v-if/v-show 驱动渲染，避免直接在模板写 v-if="isexpanded"。
在 Vue 3 中，用 watch 监听开关（如 Element Plus 的 el-switch）状态来联动控制子表单显隐，关键在于：把开关值作为响应式源监听，再更新一个控制显隐的布尔状态，并在模板中用 v-if 或 v-show 驱动渲染。
明确开关值与显隐逻辑的绑定关系
开关组件（如 el-switch）通常通过 v-model 双向绑定一个布尔值或自定义值（如 active-value/inactive-value）。你需要确保监听的是这个绑定的变量，而不是 DOM 事件对象或原始 event。
- 推荐用
ref定义开关状态，例如：const isExpanded = ref(false) - 在模板中绑定：
<el-switch v-model="isExpanded"></el-switch> - 不要在
@change里写逻辑——那属于事件处理，不是响应式监听；watch才是响应式联动的正解
用 watch 监听并更新子表单可见性
监听开关变量的变化，在回调中直接修改控制子表单显示的响应式状态。如果子表单显隐逻辑简单，甚至可省略中间变量，直接在 watch 回调里赋值给 showSubForm。
Switch Modes
下载
动态切换AI模型以优化成本与性能。当用户发出“eco mode”、“balanced mode”、“smart mode”或“max mode”等模式指令，或使用“/modes status”查询状态及“/modes setup”配置模式时触发。
- 基础写法（监听 ref）：
watch(isExpanded, (newVal) => { showSubForm.value = newVal }) - 若需区分开/关执行不同操作，可加判断：
watch(isExpanded, (newVal) => { if (newVal) { loadSubFormData(); } else { resetSubForm(); } showSubForm.value = newVal; }) - 如果开关绑定的是字符串或数字（如
active-value="1"），监听时注意类型一致性，建议统一转为布尔判断：watch(() => isExpanded.value === '1', (show) => { showSubForm.value = show })
模板中动态渲染子表单
子表单区域用 v-if 包裹，依赖 showSubForm 状态。这样既能销毁/重建 DOM（适合含校验、异步加载的复杂子表单），也能避免无谓渲染。
- 示例：
<div v-if="showSubForm"><!-- 子表单内容 --></div> - 若子表单轻量且需保留状态（如输入未提交），可用
v-show替代 - 注意：不要在
v-if中直接写表达式如v-if="isExpanded"—— 这虽能工作，但会失去对显隐逻辑的集中控制，也不利于后续扩展（比如加加载态、权限判断等）
进阶：配合表单配置实现条件显隐
当项目中存在大量动态表单字段（如根据主开关决定是否显示“高级设置”区块），建议将显隐规则收敛到配置中，再结合 computed 计算可见字段列表。
- 定义配置项：
const formConfig = [{ name: 'advanced', label: '高级设置', showWhen: () => isExpanded.value }] - 计算可见字段：
const visibleFields = computed(() => formConfig.filter(f => f.showWhen?.())) - 模板中遍历：
<div v-for="field in visibleFields" :key="field.name">...</div> - 此时
watch仍只需监听isExpanded，所有联动由配置和计算属性自动完成
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
