让 JSON 数据可视化：两款 Vue 组件实战解析

最近的项目中正好遇到JSON格式化展示的需求，需要在前端清晰美观的展示JSON数据结构。

调研了下Vue生态中有两款出色的组件：vue-json-pretty和vue-json-viewer，它们都能将JSON数据变得直观易读。

组件定位与核心差异

vue-json-pretty 更像是功能全面的JSON编辑器。它采用树形结构展示数据，支持节点编辑、虚拟滚动和深度自定义。如果你需要用户交互或处理大型数据集，这是更好的选择。

vue-json-viewer 则定位为简洁高效的查看器。它专注于快速展示和便捷复制，API简单直接。对于只需展示不需编辑的场景，它更加轻量实用。

实际选择时，问问自己：需要编辑功能吗？数据量有多大？需要多深的自定义？回答这些问题后，选择就清晰了。

vue-json-pretty：美观实用的JSON编辑器

基础使用

安装很简单：

bash 复制代码

# Vue 3
npm install vue-json-pretty --save

# Vue 2
npm install vue-json-pretty@v1-latest --save

基本集成：

html 复制代码

<template>
  <vue-json-pretty :data="apiResponse" />
</template>

<script>
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

export default {
  components: { VueJsonPretty },
  data() {
    return {
      apiResponse: {
        user: { name: '张三', id: 123 },
        status: 'active',
        permissions: ['read', 'write']
      }
    }
  }
}
</script>

核心优势

树形结构清晰：缩进和连接线让嵌套数据一目了然。数组和对象会显示长度，快速掌握数据结构。

编辑功能实用：开启编辑模式后，用户可以直接修改数值（ps：所以我最后选了它）：

html 复制代码

<vue-json-pretty
  :data="configData"
  :editable="true"
  @data-change="handleConfigUpdate"
/>

这对于配置编辑器、主题定制器等场景特别有用。

虚拟滚动处理大数据：

html 复制代码

<vue-json-pretty
  :data="largeDataset"
  :virtual="true"
  :item-height="24"
/>

即使渲染数千节点，依然保持流畅。

高度可定制：控制展示细节的选项丰富：

html 复制代码

<vue-json-pretty
  :data="complexData"
  :show-length="true"
  :show-line="true"
  :deep="3"
  :highlight-selected="true"
  :custom-value="renderTimestamp"
/>

实战：API调试面板

在实际开发中，我常用它构建API调试工具：

html 复制代码

<template>
  <div class="api-debugger">
    <div class="request-panel">
      <h4>请求参数</h4>
      <vue-json-pretty :data="requestParams" :deep="2" />
    </div>
    <div class="response-panel">
      <h4>响应数据</h4>
      <vue-json-pretty 
        :data="responseData"
        :highlight-selected="true"
        @node-click="copyNodeValue"
      />
    </div>
  </div>
</template>

vue-json-viewer：轻量高效的查看利器

快速集成

按Vue版本选择安装：

bash 复制代码

# Vue 2
npm install vue-json-viewer@2 --save

# Vue 3  
npm install vue-json-viewer@3 --save

基本使用：

html 复制代码

<template>
  <json-viewer 
    :value="logData"
    :expand-depth="2"
    copyable
    boxed
  />
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import 'vue-json-viewer/style.css'

export default {
  components: { JsonViewer },
  data() {
    return {
      logData: {
        timestamp: Date.now(),
        level: 'error',
        message: '数据库连接失败',
        details: { retryCount: 3 }
      }
    }
  }
}
</script>

设计特点

极简但实用：没有多余功能，但复制、折叠、主题切换都做得很好。默认样式清爽，颜色区分明显。

一键复制 ：添加copyable属性，每个值旁都会出现复制按钮，调试时特别方便。

性能优化好：采用延迟加载策略，大文件初始加载快。但要注意，这会影响浏览器的全局搜索功能（Ctrl+F可能找不到未渲染内容）。

主题支持：轻松切换明暗主题：

html 复制代码

<json-viewer :value="data" theme="dark" />

实战：系统日志查看器

对于日志查看场景，vue-json-viewer非常合适：

html 复制代码

<template>
  <div class="log-viewer">
    <div v-for="(log, index) in filteredLogs" :key="index">
      <div class="log-meta">
        <span class="level-tag">{{ log.level }}</span>
        <span class="time">{{ formatTime(log.timestamp) }}</span>
      </div>
      <json-viewer 
        :value="log.data"
        :expand-depth="log.level === 'error' ? 3 : 1"
        copyable
      />
    </div>
  </div>
</template>

决策指南：如何选择？

根据我的使用经验，选择建议如下：

选vue-json-pretty当：

需要编辑JSON数据
处理超大型数据集（>5MB）
要求深度自定义样式和交互
构建开发者工具或管理后台

选vue-json-viewer当：

只需查看不可编辑
需要频繁复制字段值
项目对包体积敏感
快速集成，最小配置

实用技巧

处理循环引用：两个组件遇到循环引用都会出错。传递数据前先处理：

javascript 复制代码

function safeStringify(obj) {
  const cache = new Set()
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (cache.has(value)) return '[Circular]'
      cache.add(value)
    }
    return value
  })
}

自定义样式：使用深度选择器覆盖默认样式：

css 复制代码

::v-deep .vjs-tree {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 13px;
}

总结

vue-json-pretty和vue-json-viewer都是优秀的Vue JSON组件，选择取决于具体需求。需要功能全面、支持编辑、处理大数据？选vue-json-pretty。只需简单展示、快速集成、便捷复制？选vue-json-viewer。

你是否有更好的JSON展示组件推荐？欢迎评论区留言。

关注微信公众号" 大前端历险记"，掌握更多前端开发干货姿势！