Vue 3 中动态修改 reactive 配置项需保持引用不变，仅更新内部字段；正确做法是 Object.assign 或遍历赋值，错误做法是重新 reactive 赋值；嵌套结构须确保各层 reactive，配合 watch、computed 实现联动与默认值回填。
Vue 3 中用 reactive 实现复杂配置项的动态修改，关键不是“替换整个对象”，而是精准更新内部字段，同时保持响应式引用稳定、嵌套结构可追踪、计算逻辑能联动。尤其当配置含多层嵌套对象、数组、动态键或依赖校验/计算属性时，直接赋值容易失效或漏响应。
保持 reactive 引用不变，只改内部值
这是最核心原则。如果写成 config = reactive(newConfig)，旧引用丢失，所有依赖它的模板、计算属性、watch 都会断连。
- ✅ 正确：遍历属性逐个赋值，或用
Object.assign(config, newPartial) - ❌ 错误：重新调用
reactive()赋值给同一变量（引用已变，响应链断裂） - ⚠️ 注意：对嵌套对象属性赋新对象时，需确保该属性本身也是 reactive 的（如
config.theme = reactive({...})），否则深层变更不响应
处理嵌套结构：递归更新或分层管理
复杂配置常含 user.profile.settings.permissions 这类路径。直接写 config.user.profile.settings = {...} 可以，但若只想改其中几个字段，推荐结构化操作：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 用
Object.assign(config.user.profile, { name: '新名', avatar: '' })更新同级字段 - 对深层嵌套对象（如
config.api.endpoints是数组），先确保它被 reactive 包裹：endpoints: reactive([])，再用push/splice等原生数组方法（它们已被 Proxy 拦截） - 需要按路径字符串更新？可封装一个
setByPath(obj, path, value)工具函数，边遍历边确保中间层级是 reactive 对象
配合 computed 和 watch 实现联动更新
配置项常影响 UI 状态或衍生数据。例如修改 config.mode 后，自动切换 config.theme 或重置 config.cacheTTL：
立即学习“前端免费学习笔记（深入）”；
- 用
watch监听关键字段：watch(() => config.mode, (newVal) => { config.theme = getThemeByMode(newVal) }) - 用
computed衍生只读配置：const activeApiUrl = computed(() => config.env === 'prod' ? config.api.prod : config.api.dev) - 避免在
watch中直接修改多个深层字段——建议封装为 resetToModeDefaults(mode) 函数，统一处理逻辑
支持动态字段和默认值回填
当配置结构由后端返回（如插件列表、自定义字段 schema），不能靠写死 key 名更新。此时可结合初始模板：
- 定义一份
defaultConfig模板（plain object），包含所有可能字段及默认值 - 初始化时：
const config = reactive({ ...defaultConfig }) - 动态更新某模块时：
Object.assign(config.moduleX, moduleXUpdate)，未提供的字段自动保留默认值 - 需清空并重置为默认？调用
resetToDefaults(config, defaultConfig)（递归函数，跳过非自有属性，兼容 null/undefined）
