POST请求后对象值未更新，console.log打印枚举属性结果不一致问题

嘿，这个问题我之前也碰到过好几次，其实核心原因和JavaScript控制台的异步特性以及对象引用机制有关，和枚举类型本身关系不大，我给你拆解清楚：

• 控制台的延迟求值特性
  当你执行console.log(this.simpleFilter)时，浏览器控制台并不会立刻把对象的所有属性值都生成快照保存，而是只存了一个指向该对象的引用。只有当你手动在控制台展开这个对象的那一刻，它才会去读取对象当前的实际状态。
  但单独执行console.log(this.simpleFilter.type)时，是直接读取了该行代码执行瞬间的type值，这是一个即时的快照，不会随着后续对象的变化而改变。

• 数值不一致的触发场景
  大概率是在你调用console.log(this.simpleFilter)之后、你在控制台展开对象之前，有其他代码（比如POST请求的回调逻辑、某个异步状态更新函数）把this.simpleFilter.type从1修改成了0。
  毕竟枚举类型在前端通常就是映射为数值，这种赋值更新是很常见的操作。

• 验证这个猜想的小技巧
  如果你想确认当时的对象状态，可以用这两种方式打印：

  1. 把对象转成JSON字符串，强制生成快照：

     console.log(JSON.stringify(this.simpleFilter))
     

     这时候你会看到字符串里的type值和单独打印的this.simpleFilter.type完全一致。
  2. 解构对象生成新副本，保存当时状态：

     console.log({...this.simpleFilter}, this.simpleFilter.type)
     

     解构出来的新对象不会受后续原对象修改的影响。

内容的提问来源于stack exchange，提问作者Jimmy Porto