開發(fā)環(huán)境下自定義打印效果

在 Vue.js 3 中,當我們在控制臺中打印一個 ref 數(shù)據時:

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

控制臺會輸出如下結果:

它其實就是代表 ref(false) 的意思,但顯示的很不直觀。當然,我們也可以輸出 loading.value 的值,但有沒有更加友好的方式,讓我們能直接的輸出 ref 呢?

其實,vue 已經幫我們完成了格式化輸出,在vue的代碼里能夠找到 initCustomFormatter 函數(shù),該函數(shù)就是用來在開發(fā)環(huán)境下美化輸出用的。

為了能夠啟用該函數(shù),我們需要在chrome的控制臺配置窗口,啟用自定義格式化程序、

這樣,相同的代碼,控制臺就能直觀的輸出下面結果,非常清爽。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容