开发环境下自定义打印效果

在 Vue.js 3 中，当我们在控制台中打印一个 ref 数据时：

const loading = ref(false)
console.log(loading)

控制台会输出如下结果：

它其实就是代表 ref(false) 的意思，但显示的很不直观。当然，我们也可以输出 loading.value 的值，但有没有更加友好的方式，让我们能直接的输出 ref 呢？

其实，vue 已经帮我们完成了格式化输出，在vue的代码里能够找到 initCustomFormatter 函数，该函数就是用来在开发环境下美化输出用的。

为了能够启用该函数，我们需要在chrome的控制台配置窗口，启用自定义格式化程序、

这样，相同的代码，控制台就能直观的输出下面结果，非常清爽。