🪐vue3 在控制台直观地查看ref数据

vue.js设计与实现的笔记📒

发现问题

在vue.js3中，当我们在控制台打印一个ref数据时:

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

打开控制台查看输出，如下图所示:

可以发现，打印的数据非常不直观，当然，我们可以选择直接打印count.value的值，这样就只会输出0，非常直观。那么有没有办法在打印count的时候让输出的信息更友好呢？

解决问题

当然可以，浏览器允许我们编写自定义的formatter，从而自定义输出形式。在vue3的源码中，你可以搜索到名为initCustomFormatter的函数，该函数就是用来在开发环境下初始化自定义formatter的。

以chrome为例，我们可以打开devTools的设置，然后勾选“console” -> "Enable custom formatters"选项。

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

initCustomFormatter

vue3源码中 initCustomFormatter 的定义

chrome文档

自定义对象格式化器使开发人员可以控制对象在调试器和控制台中的显示方式。

判断是不是ref对象

如果是ref对象，控制台结果是:

<div>
    Ref<span>< obj.value ></span>
</div>

if ((window as any).devtoolsFormatters) {
    ;(window as any).devtoolsFormatters.push(formatter)
} else {
    ;(window as any).devtoolsFormatters = [formatter]
}