Object.keys遍历配置对象时不能直接用forEach(this.xxx)，因回调函数未绑定组件this，导致this指向错误；应使用箭头函数、显式传入this或Vue 3的setup语法，并手动通过config[key]获取值，注意响应式更新限制与遍历适用场景。
Object.keys 遍历配置对象时为什么不能直接用 forEach(this.xxx)
因为 forEach 内部的回调函数默认不绑定组件上下文（this），在 Vue 2 Options API 或 class 组件中，直接写 forEach(this.handleConfig) 会导致 this 指向 undefined（严格模式）或全局对象，从而访问不到组件上的方法或响应式数据。
常见错误现象：TypeError: Cannot read property 'xxx' of undefined。
- 使用箭头函数可继承外层
this，但仅限于定义时外层有有效this（比如在 methods 里） - 显式传入
this作为forEach的第二个参数更稳妥，兼容性更好 - Vue 3 Composition API 中没有
this，应改用setup内声明的变量和函数，无需绑定
如何安全地把 key 和 value 同时传给处理函数
Object.keys 只返回键名数组，要拿到值得手动索引。别漏掉这步，否则容易只遍历 key 却没用上配置值。
实操建议：
- 用
Object.keys(config).forEach(key => { const value = config[key]; ... }) - 避免在循环里反复调用
Object.values(config)[i]——顺序不保证，且性能差 - 如果配置项是嵌套对象，需判断
typeof value === 'object' && value !== null再递归，否则forEach会报错
forEach 里修改响应式数据要注意什么
在 Vue 2 中，直接对响应式对象新增属性（如 config.newKey = 'val'）不会触发更新；在 Vue 3 中，reactive 对象同样不响应动态新增的顶层属性。
- 需要添加新字段时，用
this.$set(config, key, value)（Vue 2）或nextTick(() => { config[key] = value })+triggerRef（Vue 3 shallowRef 场景） - 批量修改建议先收集变更，再一次性赋值，减少响应式系统开销
- 避免在
forEach回调中直接调用this.$forceUpdate()—— 这是信号紊乱的典型表现
替代方案：什么时候不该用 Object.keys + forEach
当配置对象很大（>1000 项）、或需要中断遍历、或要返回新结构时，forEach 就不合适了。
- 需要提前退出？改用
for...in或for (const key of Object.keys(config)) { if (...) break } - 要生成新对象？直接用
Object.entries(config).reduce(...)更语义化 - 涉及异步处理（如每个配置项触发一次 API 请求）？
forEach不支持await，必须换for...of或map + Promise.all
轻量级遍历的前提是“同步、简单、无分支控制流”。一旦逻辑变重，就该让位给更可控的结构。
