最近公司內(nèi)部需要做一個后臺緩存的可視化平臺，其實后臺緩存都是一些JSON數(shù)據(jù)，所以其實是需要做一個 JSON 展示頁面。

前后使用了兩個 JSON 展示庫，跟大家分享一下：

vue3-json-viewer

首先需要安裝這個庫 vue3-json-viewer

pnpm install vue3-json-viewer

在main文件中全局引入；

import JsonViewer from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css"; // 引入樣式

app = createApp(App);
app.use(JsonViewer)

在頁面中去使用：

圖片

這個庫展示 JSON 是挺好看的，看以下結(jié)果：

但是它有一個缺點就是，它展示的 JSON 數(shù)據(jù)是延遲加載的，當(dāng)數(shù)據(jù)多的時候，請看以下，這個庫為了性能優(yōu)化，所以當(dāng)數(shù)據(jù)量大的時候，后面的節(jié)點都是采用 延遲加載的方式。

雖然這樣能優(yōu)化渲染性能，但是有一個很大的缺點，那就是后面的節(jié)點無法被及時搜索到。

因為產(chǎn)品經(jīng)理說，使用者喜歡使用瀏覽器的 Ctrl + F掉出搜索框，來搜索緩存數(shù)據(jù)，但是如果延遲加載的話，那么后面的數(shù)據(jù)肯定無法被及時搜索到。

json-editor-vue3

考慮到上面那些之后，最后還是選擇了 json-editor-vue3。

pnpm install json-editor-vue3

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue3'
 
Vue.use(JsonEditorVue)

由于 json-editor-vue3 使用的是 commonjs 的方式，所以你直接在 Vite 項目中使用的話，會報錯 does not provide an export named 'default'，不要慌，只需要按照下面去做

// vite.config.js
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
export default defineConfig({
  plugins: [vue(),viteCommonjs()],
})

頁面中使用：

圖片

可以看到當(dāng) currentMode = "code"時，就是純文本模式，這個時候，這個插件會幫我們一次性加載所有的 JSON 數(shù)據(jù)，而不是延遲加載，這樣的話數(shù)據(jù)就能被使用者及時搜索到了！

而且這個庫還提供了篩選、模式切換、全屏、編輯等實用功能。