还在为 Vue 3 中打印 ref 不直观而烦恼？用这招彻底解决！

你是否还在为 vue3 打印 ref 信息不直观而困扰?

在浏览器控制台打印 ref 数据:

const count = ref(0)
console.log(count)

打开控台查看输出,结果如下图所示:

我们可以发现,打印的数据非常不直观。

那么有没有办法在打印数据的时候让输出信息更友好呢?

当然可以,浏览器允许我们编写自定义的 formatter, 从而自定义输出形式。

以 Chrome 为例, 打开 DevTools 的设置, 然后勾选 控制台→自定义格式设置工具, 英文应该是 Enable custom formatters。

然后刷新浏览器查看控制台,会发现输出内容变得非常直观。

想要了解更多实现细节,可以在 Vue3 源码中搜索 initCustomFormatter 的函数,这个函数就是用来在 开发环境 下初始自定义 formatter 的。