直接给 ref 包裹的对象新增属性不触发响应式更新，因 proxy 仅拦截已存在 key；应初始化定义全、用 object.assign 扩展、或改用 reactive。
因为直接给 ref 包裹的对象添加新属性，绕过了 Vue 的响应式追踪机制——Proxy 只能拦截已存在 key 的读写，对新增 key 无感知。
新增属性没被代理，Vue 根本“看不见”它
Vue 3 的响应式依赖 Proxy，而 Proxy 的 set 拦截器只对对象中**原本就存在**的属性生效。当你执行类似下面的操作：
const user = ref({ name: '张三' });user.value.age = 25; // ❌ 新增 age，不触发更新user.value.city = '北京'; // ❌ 同样无效
这些新增字段没有被 reactive 包装，也不在初始代理的 key 列表里，所以修改不会触发依赖通知，视图自然不动。
正确补丁：用 reactive 重包，或用 Vue.set 级别等效操作
不是所有新增都要推倒重来。有三种稳妥方式，按场景选：
-
初始化时尽量定义全：把可能用到的字段提前写进对象，哪怕值为
null或空字符串 -
用
Object.assign扩展并保持响应式：Object.assign(user.value, { age: 25, city: '北京' })—— 因为user.value是 reactive 代理，assign是对已有代理的批量赋值，所有 key 都走 setter -
动态新增且结构复杂？换
reactive+toRefs：如果对象字段常变、嵌套深，直接用reactive定义，再用toRefs解构，更符合设计意图
别踩“解构即失联”这个坑
有人会先解构再加字段，比如：
const { name } = toRefs(user);name.value = '李四'; // ✅ 有效name.age = 25; // ❌ 错误：name 是 ref，没有 age 属性
记住：toRefs 解构出的是一个个独立的 ref，它们只代理原始对象的指定字段。想加新字段，必须回到源对象（user.value）上操作，不能在解构结果上“硬加”。
终极保险：需要频繁增删字段？用 reactive 替代 ref
如果你的对象结构本身就不固定（比如表单字段由后端返回、配置项动态加载），ref 并非最优选。直接用：
const form = reactive({});form.name = '王五'; // ✅ 响应式form.tags = ['a', 'b']; // ✅ 响应式form.extra = { id: 1 }; // ✅ 嵌套对象也自动 reactive
此时所有属性增删改都走 Proxy 拦截，无需额外补丁，语义也更清晰。
