如何在控制台访问Axios响应赋值给Vue3 ref的嵌套属性

问题原因 #

你遇到的现象是两个常见的调试误区共同导致的：

• 异步时序问题：你的打印代码执行时，Axios的GET请求还未返回结果，state.value.headings还没有完成赋值，此时读取自然是空值。而浏览器控制台打印引用类型时默认是懒求值的，你点击展开整个state对象时才会读取最新的属性值，此时请求已经完成、headings已经被赋值，所以能看到完整的嵌套属性。模板能正常渲染是因为Vue的响应式系统会监听值的变化，更新后自动触发视图重渲染。
• Vue响应式Proxy的展示限制：Vue3的ref包裹的对象本质是Proxy代理对象，控制台直接打印Proxy实例不会直接展示内部的原始属性值。

解决方法 #

下面是几种可以正确获取嵌套属性值的调试方案：

1. 确保打印逻辑在异步请求完成后执行 #

如果你的打印语句和请求逻辑并行执行，无论用什么方法都拿不到还没返回的数据，要把打印逻辑放在请求的成功回调里，或者async/await的await语句之后：

// 回调写法
axios.get('/home').then(res => {
  // 替换为你实际的取值逻辑
  state.value.headings = res.data.at(-1).多语言标题属性
  // 赋值完成后再打印
  console.log(state.value.headings.en)
})

// async/await写法
const fetchHomeData = async () => {
  const res = await axios.get('/home')
  state.value.headings = res.data.at(-1).多语言标题属性
  console.log(state.value.headings.en)
}
fetchHomeData()

2. 使用toRaw获取原始对象打印 #

从Vue中导入toRaw方法，可以直接获取Proxy代理对应的原始对象，避开Proxy的展示限制：

import { ref, toRaw } from 'vue'

// 请求完成后打印
console.log(toRaw(state.value.headings))
console.log(toRaw(state.value.headings).en)

3. 用JSON序列化中转打印 #

如果你不想引入额外的API，也可以用JSON序列化和反序列化中转，直接拿到普通JS对象再打印：

const plainHeadings = JSON.parse(JSON.stringify(state.value.headings))
console.log(plainHeadings)
console.log(plainHeadings.en)

4. 使用Vue Devtools调试 #

安装浏览器Vue Devtools扩展后，可以直接在组件面板中查看所有响应式变量的实时值，不需要手动写打印语句，是调试Vue响应式状态的最优方案。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov