Vue响应式对象打印显示guid非空 直接访问取值却返回null

我遇到了一个此前从未见过的异常问题：我有一个名为action的Vue响应式对象，包含actionType、faxNumber、guid三个属性。
我执行console.log('action=', action, 'guid=', action.guid)语句后得到如下输出：

action = AutomationActionFax {__ob__: Observer}
   actionType: "fax",
   faxNumber: null,
   guid: "JHANQK1MQ",

guid = null <-- 异常点

为什么同一条语句里，打印的action对象上guid属性值为"JHANQK1MQ"，但直接取action.guid返回的却是null？

根本原因 #

这不是Vue的bug，是浏览器控制台的打印机制和代码执行时序共同导致的现象：

• 首先，浏览器console.log打印引用类型（比如对象、数组）时采用惰性求值策略：打印时仅保存对象的引用，不会立刻生成当前所有属性的快照，只有当你手动点击控制台中的对象展开箭头时，浏览器才会读取对象当前的最新属性值并展示。
• 执行console.log那行代码的瞬间，guid属性的真实值确实是null，基础类型取值会立刻求值，所以直接打印的action.guid输出为null。
• 执行完打印语句后，你的业务逻辑（比如异步请求返回、nextTick回调等）给action.guid赋值为"JHANQK1MQ"，等你在控制台点开action对象查看属性时，拿到的就是更新后的值，因此出现了两者不一致的情况。

验证方法 #

如果要查看打印语句执行瞬间的对象真实值，可以将对象序列化后再打印，强制生成当前状态的快照：

// 序列化后再反序列化，得到执行时刻的对象快照
console.log('action=', JSON.parse(JSON.stringify(action)), 'guid=', action.guid)

此时打印出的action对象里的guid会和直接取值的结果一致，均为null。

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