提升开发体验小技巧

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

const num = ref(0)
const data = reactive({
  num: 0
})
console.log('num:',num)
console.log('data:',data)

打开控制台查看输出：

可以发现，打印的数据非常不直观。那么如何让输出的信息更友好呢？以Edge为例，我们可以打开 DevTools 的设置-首选项，然后勾选控制台→启动自定义格式化程序

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