在chrome增加ref,reactive的输出可读性

背景

最近在看《vue.js的设计与实现》,发现了一个增加可读性的操作。

1、测试绑定的值与输出

const testRef = ref('aa')
const testReactive = reactive({ name: 'aaa' })
console.log(93, testRef)
console.log(93, testReactive)

• 输出， 我们可以看到可读性太差了。

2、处理、优化

可以发现，打印的数据非常不直观。 办法在打印 count 的时候让输出的信息更友好呢?当然可以，浏览器 允许我们编写自定义的 formatter，从而自定义输出形式。在 Vue.js 3 的源码中，你可以搜索到名为 initCustomFormatter 的函数，该 函数就是用来在开发环境下初始化自定义 formatter 的。以 Chrome 为例，我们可以打开 DevTools 的设置，然后勾选“Console”→“Enable custom formatters”选项 --- 摘自《Vue.js设计与实现》

1、显示效果

2、设置