ref 包裹对象时属性增删不能直接响应：赋值可响应，delete 不触发更新，因 Proxy 默认不拦截 deleteProperty；需用 reactive 配合 deep watch 或替换对象实现响应。
ref 本身不直接检测对象属性的添加或删除——关键在于它包装的对象是否具备响应式能力，而 ref 包裹普通对象时，底层依赖的是 reactive 的 Proxy 机制；但 ref 并不自动让内部对象“可代理新增/删除”，真正起作用的是 ref 所包裹的对象是否由 reactive 创建，或者是否是 Proxy 可拦截的结构。
ref 包裹对象时，属性增删能否响应？
不能直接响应。例如：
const obj = ref({ a: 1 })<br>obj.value.b = 2 // ✅ 属性赋值会触发更新（因为 obj 是 ref，其 .value 是 reactive 对象）<br>delete obj.value.a // ❌ 不触发更新（Proxy 默认不拦截 deleteProperty，除非显式启用）
原因：ref({}) 内部会把对象转为 reactive（Vue 3 对 ref 的对象值做了自动 reactive 处理），但 Vue 的默认 reactive 是基于 Proxy 的浅层拦截，delete 操作不会触发视图更新，因为 Proxy 的 deleteProperty trap 在 Vue 响应式系统中未用于触发依赖更新。
想监听属性增删，得用 reactive + deep watch
正确做法是：用 reactive 创建对象，并配合 watch 开启 deep: true，同时注意 —— Vue 3 的 reactive 本身就能响应属性添加（通过 Reflect.set）和删除（需配合 triggerRef 或手动通知），但模板中不会自动反映 delete 后的缺失，需结合逻辑处理：
- 添加属性：reactiveObj.newKey = 'val' → 模板中 {{ reactiveObj.newKey }} 会响应
- 删除属性：delete reactiveObj.key → 视图不自动更新，但可通过
triggerRef强制刷新（适用于 ref 包裹的 reactive 对象）或改用proxy.deleteProperty配合自定义 handler（高级用法） - 更稳妥的方式是避免直接 delete，改用
Vue.reactive({...})替换整个对象，或用Object.assign({}, old, { ...updates })
watch 能捕获增删变化吗？
可以，但必须满足两个条件：
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 监听源是 reactive 对象（或 ref.value 是 reactive 对象）
- watch 配置
{ deep: true }，且回调中检查新旧值差异
例如：
const state = reactive({ user: { name: 'Alice' } })<br>watch(() => ({ ...state.user }), (newVal, oldVal) => {<br> console.log('user 结构变了', newVal, oldVal)<br>}, { deep: true })<br>// 此时 state.user.age = 25 或 delete state.user.name 都会触发（取决于 Proxy handler 实现）
注意：纯 ref({}) 无法让 delete 被 watch 捕获，必须确保被监听的是 reactive 实例，或用 getter 函数返回一个稳定引用。
替代方案：用 shallowRef + 自定义 proxy（不推荐日常使用）
如果真有强需求监听 delete，可手动创建带 deleteProperty trap 的 Proxy，并用 shallowRef 包裹它，再配合 onTrack/onTrigger 调试依赖。但这已脱离 Vue 常规响应式范式，维护成本高，一般场景用 状态重置 + reactive 替换 更清晰可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
