vue 3 的 reactive 对象支持动态新增和删除属性并保持响应式，得益于 proxy 拦截 set 和 deleteproperty；新增用 state.key = val 或 state['key'] = val，删除用 delete state.key；数组操作需用 push/splice 等响应式方法。

Vue 3 的 reactive 对象支持动态新增和删除属性并保持响应式，这得益于 Proxy 的能力——它能拦截 set 和 deleteProperty 操作，不像 Vue 2 那样受限。

动态新增属性（直接赋值即可）

只要在 reactive 对象上用点号或方括号语法新增属性，Vue 就能自动追踪：

• ✅ 正确：state.newField = 'hello' 或 state['newCount'] = 10
• ✅ 嵌套对象也行：state.profile = { avatar: '/img.jpg' }，其内部属性自动响应式
• ⚠️ 注意：如果新增的是一个普通对象（非 reactive），它的深层属性仍可响应；但若想确保完整响应性，建议对复杂嵌套结构也用 reactive() 包裹（如 state.nested = reactive({ x: 0 })）

动态删除属性（用 delete 操作符）

delete 在 reactive 对象上是响应式的，会触发视图更新：

Orderly Sdk React Hooks

Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。

下载

• ✅ 正确：delete state.unwantedKey
• ✅ 删除嵌套属性也生效：delete state.user.phone
• ❌ 错误：state.unwantedKey = undefined —— 这只是设值，不会从对象中移除属性，也不会触发依赖清理

数组里新增/删除元素要走响应式方法

虽然对象属性增删已无限制，但数组仍是特殊场景：

• ✅ 新增：用 push、unshift、splice 等原生响应式方法
• ✅ 删除：用 splice 或 filter 后赋值给原 reactive 数组（如 Object.assign(items, items.filter(...))），避免直接 items = items.filter(...) 切断代理
• ❌ 不推荐：用索引直接赋值新增（arr[arr.length] = x）或 delete arr[0]（会留下 empty slot，不触发更新）

初始结构建议留空字段或显式声明

虽支持动态添加，但为避免模板中出现 undefined 或类型推断问题，推荐：

• 初始化时预留常用字段，哪怕值为 null 或 ''，例如：{ name: '', email: '', tags: [] }
• 若需运行时决定字段，可用 Object.assign(state, { dynamicKey: value })，同样响应
• 不依赖 Vue.set（Vue 3 已废弃），Proxy 天然支持