关键在于分层管理状态而非冗余存储，用 reactive 统一维护选中路径（如数组或对象），下级选项通过 computed 动态推导，副作用用轻量 watch 处理，选项数据与选中状态分离，并通过 restore 方法支持反向回填。
用 reactive 维护多级联动下拉菜单的选中项，关键不是“把所有中间值都塞进 reactive 对象”，而是按层级职责分层管理，让状态可追溯、可响应、不冗余。
只存必要路径，不存每级临时值
比如省市区三级联动，不需要在 reactive 中定义 province、city、district 三个独立字段并反复赋值。更合理的是：
- 用一个扁平数组记录最终路径：
selectedPath = reactive(['110000', '110100', '110101']) - 或用对象结构表达层级语义：
selection = reactive({ province: '110000', city: '110100', district: '110101' }) - 避免同时维护
selectedProvince+selectedCity+selectedDistrict三个 ref 或 reactive 字段——它们本质是同一路径的不同切片，重复维护易导致不一致
联动更新靠 computed + watch，而非手动改 reactive
下级选项应由上级选中值动态推导，而不是每次 change 都去修改 reactive 数据。例如：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
- 城市列表用
computed实时过滤：const cityOptions = computed(() => provinces.value.find(p => p.code === selection.province)?.cities || []) - 当
selection.province改变时，cityOptions自动更新，无需额外 watch 或赋值 - 若需副作用（如清空下级选中），再加轻量
watch：watch(() => selection.province, () => { selection.city = ''; selection.district = ''; })
加载状态与选项数据分离存储
选中项（selection）和选项源（options）属于不同关注点，不应混在一个 reactive 对象里：
- 选中路径单独放：
const selection = reactive({ province: '', city: '', district: '' }) - 各级选项用独立响应式变量或缓存 Map 管理：
const citiesMap = reactive(new Map())，按provinceCode缓存对应城市列表 - 这样既保证选中状态轻量可序列化，又支持按需加载、防抖、取消请求等优化
支持反向回填时，用方法驱动而非状态硬编码
当需要从完整路径自动展开各级菜单（比如编辑已有数据），不要靠一堆 if-else 手动赋值，而是封装一个复位逻辑：
- 在组合函数中提供
restore(path)方法，内部逐级触发加载与赋值 - 它先设
selection.province = path[0]，等城市数据就绪后再设selection.city = path[1]，依此类推 - 整个过程基于 reactive 的响应链自动推进，无需手动同步中间态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
