delete 无法触发 Vue 3 reactive 的响应式更新，因其 Proxy 未拦截 deleteProperty；正确做法是用 ref 包裹对象并整体替换，如 state.value = { ...state.value } 且删除键后再赋值。
在 Vue 3 的 reactive 对象中，直接使用 delete 操作符删除属性不会触发响应式更新，这是由 Proxy 的拦截机制决定的——Vue 的 reactive 基于 Proxy 实现，而 Proxy 无法拦截 delete 对属性的删除（除非显式 trap deleteProperty，但 Vue 并未将其设为响应式操作）。
为什么 delete 不会触发更新
Vue 3 的 reactive 对象通过 Proxy 拦截 get 和 set，但对 deleteProperty 的拦截默认不触发依赖收集或更新通知。即使删除成功（返回 true），视图也不会重新渲染，相关 effect 也不会重新执行。
例如：
⚠️ 错误示范（无响应）：const state = reactive({ a: 1, b: 2 })
delete state.a // 成功删除，但组件不更新，watch/effect 不重运行
正确删除 reactive 属性并触发更新的方法
要真正实现“删除 + 响应式更新”，必须通过 Vue 提供的响应式语义化方式，让系统感知到状态变更：
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
-
使用
Vue.delete()（仅 Vue 2）：Vue 3 中已移除该 API，不可用。 -
推荐：赋值为
undefined或null并配合triggerRef（适用于 shallowRef/ref 场景）：不适用于普通reactive对象。 -
最佳实践：用
Reflect.deleteProperty()+ 手动触发更新（不推荐，侵入性强）：需搭配trigger（内部 API，不稳定）。 - ✅ 推荐方案：改用
ref包裹对象，再替换整个值
推荐方案：用 ref 替代 reactive 并整体替换
若需频繁增删属性，建议放弃 reactive，改用 ref 管理一个普通对象，并通过赋新对象来触发响应：
import { ref, watch } from 'vue'
const state = ref({ a: 1, b: 2 })
// 安全删除并触发更新
const removeKey = (key) => {
const newObj = { ...state.value }
delete newObj[key]
state.value = newObj // ✅ 触发响应式更新
}
// 使用
removeKey('a') // 视图立即更新，watch 也会执行
进阶：封装可响应式删除的 reactive 工具函数
如仍需保留 reactive 表达习惯，可封装一个安全删除函数（本质仍是替换）：
import { reactive, toRaw } from 'vue'
function reactiveDelete(obj, key) {
const raw = toRaw(obj)
const cloned = { ...raw }
delete cloned[key]
Object.assign(raw, cloned) // 修改原始对象，Proxy 会拦截后续 set，但 delete 本身不触发
// ⚠️ 注意：这仍不能保证响应 —— 更稳妥的是返回新对象并重新赋值
}
// 更可靠写法（需配合外部 ref）
const stateRef = ref(reactive({ a: 1, b: 2 }))
const safeDelete = (key) => {
stateRef.value = reactive({ ...toRaw(stateRef.value) }) // 先解包再重建
delete stateRef.value[key]
}
实际项目中，**优先使用 ref + 解构赋值替换**，简洁、稳定、符合 Vue 3 响应式设计哲学。对 reactive 对象做动态结构变更，本质上与响应式系统的“状态快照”模型存在张力，硬绕过反而增加维护成本。
