code前端网Vue3项目里怎么处理嵌套复杂JSON？有轻量好用的查看器推荐+快速上手+实用扩展吗？
日常做Vue3开发或者调试API接口时，最头疼的场景之一就是看后端返回的十几层嵌套、字段密密麻麻、可能还有格式问题的JSON文本——要么用浏览器控制台的原生JSON展开，复制粘贴到编辑器里容易出错，来回切换也麻烦；要么搜在线JSON查看器，万一接口里有敏感数据不敢随便传，这时候，在Vue3项目里直接集成一个轻量、功能全、不用跳页面的JSON查看器，效率提升不是一星半点,今天咱们就聊聊这个事儿。
为什么不建议直接在Vue3里手写JSON查看器？
很多刚接触这个需求的开发者会想，不就是个展开折叠加高亮吗？自己写个组件多自由？但实际踩过坑才知道，手写的问题真不少： 首先是性能问题，特别是遇到几十上百KB的大数据量JSON，或者几千条数组的情况，原生手写的v-for渲染嵌套节点，页面会直接卡顿甚至卡死，得自己做虚拟滚动，但虚拟滚动在嵌套组件上的适配又特别耗时间。 然后是功能完善成本高，基础的展开折叠、语法高亮好做，但复制键值对、折叠到指定层级、搜索高亮关键节点、切换紧凑/美化格式、显示数据类型标签、自动检测JSON格式错误这些高频功能，每个都得花心思写，兼容性还要考虑各种浏览器版本。 最后是维护成本高，Vue3的更新速度不慢，手写的组件如果用了某些旧版API，后续升级Vue3或者接入TypeScript都得改半天。 所以除非项目有极其特殊的定制需求（比如要求完全符合UI规范到像素级，且需要对接内部工具链的特殊功能），否则直接用成熟的开源Vue3 JSON Viewer组件是更明智的选择。
轻量实用的Vue3 JSON Viewer开源组件推荐
现在GitHub上Vue3相关的JSON查看器组件有不少，但真正轻量（体积小、依赖少）、功能全、更新活跃、有中文文档或者友好示例的，其实就那么几个，我给大家筛选出三个经过时间和项目验证的： 第一个是vue3-json-viewer，这个是我目前项目里用得最多的，也是今天重点讲的，它的体积压缩后只有几十KB，零依赖（只依赖Vue3核心库），支持TypeScript，功能覆盖了几乎所有日常需求，还有非常清晰的中文示例和API文档，更新频率也稳定，最近半年还在修复小bug和加新功能。 第二个是vue-json-pretty，这个组件在Vue2时代就非常火，现在也完全适配Vue3，体积也不大，功能和vue3-json-viewer差不多，但相比之下，它的UI风格可能更偏向于传统的Web工具，而且依赖稍微多一点点（不过也是Vue生态常用的）。 第三个是@vueup/vue-quill-editor？不对不对，串了，是@formkit/vue-json-editor-viewer？哦还有个更轻的叫vue3-json-editor，不过这个主要是编辑功能更强，如果只需要查看和简单复制的话，前面两个更合适。 综合下来，vue3-json-viewer是新手入门和日常项目的首选**,接下来咱们就围绕它来讲快速上手。
vue3-json-viewer的快速上手教程（含Vue3+Vite+TypeScript版本）
第一步：安装组件
不管是用npm、yarn还是pnpm，安装都很简单，我平时用pnpm比较多，速度快： 如果是npm的话：npm install vue3-json-viewer --save 如果是yarn的话：yarn add vue3-json-viewer 如果是pnpm的话：pnpm add vue3-json-viewer
第二步：在项目中引入并注册
这里分两种情况，一种是全局注册，一种是局部注册。 如果项目里很多页面都要用到JSON查看器，建议全局注册，这样不用每个页面都引入。 在Vue3+Vite+TypeScript的main.ts（或者main.js）里：
import { createApp } from 'vue'
import App from './App.vue'
import JsonViewer from 'vue3-json-viewer'
// 别忘了引入组件的样式，这个很重要，不然没有高亮和折叠效果
import 'vue3-json-viewer/dist/index.css'
const app = createApp(App)
app.use(JsonViewer)
app.mount('#app')
如果只是某个页面或者组件偶尔用，建议局部注册，减少首屏加载体积： 在需要使用的组件script setup标签里：
import { ref } from 'vue'
import { JsonViewer } from 'vue3-json-viewer'
import 'vue3-json-viewer/dist/index.css'
// 定义一个模拟的复杂嵌套JSON数据
const complexJson = ref({
code: 200,
message: "success",
data: {
userInfo: {
id: 123456,
username: "zhangsan123",
nickname: "张三的Vue3之旅",
avatar: "https://example.com/avatar.jpg",
tags: ["前端开发", "Vue3爱好者", "API调试达人"],
address: {
province: "广东省",
city: "深圳市",
district: "南山区",
detail: "科技园南区某某大厦12楼",
coordinates: {
lat: 22.543099,
lng: 114.057868
}
}
},
productList: [
{
id: 1,
name: "Vue3实战教程",
price: 99.9,
stock: 100,
isOnSale: true,
specs: {
color: ["红色", "蓝色", "黑色"],
size: ["S", "M", "L", "XL"]
}
},
{
id: 2,
name: "TypeScript入门到精通",
price: 89.9,
stock: 50,
isOnSale: false,
specs: {
color: ["白色"],
size: ["标准版"]
}
}
],
pageInfo: {
currentPage: 1,
pageSize: 10,
totalCount: 256
}
}
})
第三步：在模板中使用组件
在对应的组件template标签里，直接写
<template>
<div class="json-viewer-container">
<h2>API返回的复杂嵌套JSON数据展示</h2>
<!-- 这里的copyable是启用复制功能，deep是默认展开的层级，比如这里默认展开3层 -->
<json-viewer :value="complexJson" :copyable="true" :deep="3" />
</div>
</template>
<style scoped>
.json-viewer-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
h2 {
margin-bottom: 20px;
color: #333;
}
</style>
这样就完成了最基础的使用，运行项目后，你就能看到一个可以展开折叠、语法高亮、带复制按钮的JSON查看器了。
vue3-json-viewer的高频实用扩展功能
刚才的基础版本已经能满足大部分需求，但如果要处理更复杂的场景,还可以用它的扩展功能：
扩展功能1：自定义主题
默认的主题是深色系的，但如果你的项目是浅色系的UI，深色主题会显得很突兀，这时候可以自定义主题，组件提供了几个内置的浅色主题，比如light,只需要在模板里加一个theme属性：
<json-viewer :value="complexJson" :copyable="true" :deep="3" theme="light" />
如果内置主题还不满意，还可以通过CSS变量自定义颜色，比如把键的颜色改成红色，值的颜色改成绿色： 在组件的style标签里（如果是全局注册的话可以放在全局样式里，局部注册的话可以放在scoped里加:deep()）：
<style scoped>
:deep(.jv-key) {
color: #e74c3c;
}
:deep(.jv-string) {
color: #27ae60;
}
:deep(.jv-number) {
color: #3498db;
}
:deep(.jv-boolean) {
color: #9b59b6;
}
</style>
扩展功能2：搜索高亮关键节点
如果JSON数据特别大，找某个字段或者值特别费劲，组件提供了search属性，可以绑定一个搜索框的输入值，自动高亮匹配到的内容，还支持正则表达式： 首先在script setup里加一个searchText的ref：
const searchText = ref('')
然后在模板里加一个搜索框，绑定searchText，再在json-viewer标签里加search属性：
<template>
<div class="json-viewer-container">
<h2>API返回的复杂嵌套JSON数据展示</h2>
<div class="search-box">
<input
type="text"
v-model="searchText"
placeholder="搜索字段或值（支持正则）"
class="search-input"
/>
</div>
<json-viewer
:value="complexJson"
:copyable="true"
:deep="3"
theme="light"
:search="searchText"
/>
</div>
</template>
<style scoped>
/* 前面的样式保留，加个搜索框的样式 */
.search-box {
margin-bottom: 20px;
}
.search-input {
width: 100%;
max-width: 500px;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
outline: none;
}
.search-input:focus {
border-color: #409eff;
}
</style>
现在你在搜索框里输入“Vue3”，对应的productList里的第一个产品名称就会自动高亮显示；如果输入“/\d+/”,所有的数字都会被高亮。
扩展功能3：自定义折叠/展开按钮
默认的折叠/展开按钮是一个小三角，但如果你的项目有特殊的UI规范，比如用加号减号，或者用自定义的图标，组件也提供了expanded-icon和collapsed-icon属性，支持传入Vue的VNode或者字符串： 比如用Element Plus的图标（前提是你项目里已经安装并引入了Element Plus）： 首先在script setup里引入Element Plus的图标：
import { Plus, Minus } from '@element-plus/icons-vue'
然后在json-viewer标签里加这两个属性：
<json-viewer :value="complexJson" :copyable="true" :deep="3" theme="light" :search="searchText" :expanded-icon="Minus" :collapsed-icon="Plus" />
这样折叠按钮就变成了加号,展开按钮就变成了减号。
扩展功能4：禁用某些数据类型的展开
比如你不想让用户展开数组或者对象，或者只想展开对象不想展开数组，组件提供了expandable属性，可以传入一个函数，返回true或者false来控制： 在script setup里加一个expandableFunc的函数：
const expandableFunc = (key: string | number, value: any, type: string) => {
// type的可能值有：object, array, string, number, boolean, null, undefined
// 这里我们设置数组默认不展开，对象默认展开
return type === 'object'
}
然后在json-viewer标签里加expandable属性：
<json-viewer :value="complexJson" :copyable="true" :deep="3" theme="light" :search="searchText" :expandable="expandableFunc" />
现在你运行项目，会看到productList和tags这些数组默认是折叠的，只有userInfo、address、coordinates这些对象默认是展开的。
最后说两句
除了刚才讲的这些扩展功能，vue3-json-viewer还有很多其他的API，比如sort属性可以对对象的键进行排序，timeout属性可以设置大数据量渲染的超时时间，editable属性可以启用简单的编辑功能等等，大家可以去它的中文示例网站上自己探索一下。 在Vue3项目里集成一个成熟的JSON查看器，能大大提升开发和调试的效率，尤其是对于那些经常需要处理复杂嵌套JSON数据的开发者来说，更是必不可少的工具，如果你的项目还在跳页面用在线JSON查看器，或者在用原生控制台的展开功能，不妨试试今天讲的vue3-json-viewer,相信你会爱上它的。
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
