Vue3应用中如何在浏览器控制台快速查看代理数据真实值？

嘿，我完全懂你遇到的这个小麻烦——当你打印Vue3里的响应式数据（比如ref包裹的数组/对象）时，控制台显示的是Proxy代理对象，得点好几次才能展开看到真实内容，确实有点烦！

这里有几个能让你一次性查看真实值的方法，按需选用：

方法1：用JSON.stringify()转成格式化字符串打印 #

这个方法能直接把数据转成可读性强的结构化字符串，适合数据量不大的场景，一眼就能看完所有内容：

console.log('+++FOUND getForumOrderingLabelsByForumCategoryId.value::')
// 用JSON.stringify格式化输出，第二个参数为null，第三个参数2是缩进空格
console.log(JSON.stringify(getForumOrderingLabelsByForumCategoryId.value, null, 2))

// 遍历数组时也可以用同样的方式
nextForumOrderingLabel.forumsList.map(nextForumListItem => {
    console.log('nextForumListItem::')
    console.log(JSON.stringify(nextForumListItem, null, 2))
})

方法2：用Vue的toRaw()获取原始数据打印 #

Vue3提供了toRaw()方法，能直接拿到响应式数据背后的原始对象/数组，打印出来就是真实的非代理数据，还能保留对象结构方便后续控制台操作：
首先要先导入toRaw：

import { toRaw } from 'vue'

然后修改你的打印代码：

console.log('+++FOUND getForumOrderingLabelsByForumCategoryId.value::')
console.log(toRaw(getForumOrderingLabelsByForumCategoryId.value))

nextForumOrderingLabel.forumsList.map(nextForumListItem => {
    console.log('nextForumListItem::')
    console.log(toRaw(nextForumListItem))
})

方法3：试试console.dir()替代console.log() #

部分浏览器里，console.dir()会比console.log()更清晰地展示对象的层级结构，尤其是代理对象，你可以试试这个：

console.log('+++FOUND getForumOrderingLabelsByForumCategoryId.value::')
console.dir(getForumOrderingLabelsByForumCategoryId.value)

为什么会出现这个问题？ #

Vue3用Proxy API实现响应式，你打印的getForumOrderingLabelsByForumCategoryId.value其实是Proxy包装后的代理对象，而不是原始的数组/对象，所以控制台需要展开代理才能看到真实数据。上面的方法都是绕开代理直接获取或展示原始数据~

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