for...in 和 Object.keys() 不响应式，因其调用 [[Enumerate]] 或 ownKeys 操作，不触发 Proxy 的 get 拦截，无法收集依赖；应改用 computed 包装 Object.keys(toRaw(obj)) 或模板中使用 v-for 配合 Object.entries()。
在 Vue 3 的 reactive 对象上直接使用 for...in 或 Object.keys() 无法触发响应式更新，因为这些原生遍历方法只读取对象的当前属性快照，不建立响应式依赖追踪。
为什么 for...in 和 Object.keys 不响应式？
Vue 的响应式系统基于 Proxy 拦截属性访问（get），而 for...in 和 Object.keys() 内部调用的是对象的 [[Enumerate]] 或 ownKeys 操作，它们不会触发每个属性的 get 拦截，因此收集不到依赖。即使后续属性变化，视图也不会更新。
正确做法：用 toRaw + reactive 包装或改用 ref + computed
若必须动态遍历键名并保持响应式更新，推荐以下方式：
-
用
Object.keys(toRaw(obj))获取键数组，再配合computed包装：确保键列表随源对象结构变化而更新 -
避免直接遍历 reactive 对象本身，改用
ref存储键名数组，并在数据变更时手动更新（适合键相对稳定场景） -
优先使用
v-for配合Object.entries()或Object.keys()在模板中遍历 —— Vue 编译器会自动处理依赖收集（仅限模板内）
实际可用的响应式遍历示例
在 setup 中正确响应新增/删除属性：
import { reactive, computed, toRaw } from 'vue'
const state = reactive({ a: 1, b: 2 })
// ✅ 响应式键列表：当 state 新增或删除属性时，keys 自动更新
const keys = computed(() => Object.keys(toRaw(state)))
// ✅ 模板中可直接用（v-for="key of keys"），且响应式
// ❌ 不要这样：const keys = Object.keys(state) —— 不响应
注意：Proxy 限制与替代方案
reactive 返回的是 Proxy 实例，其 ownKeys 被拦截用于依赖收集，但原生方法无法触发该拦截。如需深度监听结构变化（比如 key 增删），还可考虑：
- 用
watch监听整个 reactive 对象（开启deep: true） - 对频繁增删 key 的场景，改用
Map并用reactive(new Map())（Vue 3.2+ 支持 Map 响应式） - 业务逻辑层封装一个带事件通知的 reactive 字典类（如 emit('change', { type: 'add', key })）
