Vue里怎么实现两个版本JSON数据的差异对比高亮显示？

Mr.雨童提问于 2026-03-08 13:31:21 阅读 58

交互

我在做一个配置管理功能，需要对比用户修改前后的JSON数据，并把差异部分高亮出来。试了用deep-diff库拿到差异，但不知道怎么在页面上直观地展示出来，特别是嵌套对象的情况。

现在我的模板是这样写的，但diff结果一复杂就乱了，有没有更好的做法？

<template>
  <div>
    <div v-for="(item, index) in diffResult" :key="index">
      {{ item.kind }}: {{ item.path.join('.') }} → {{ item.lhs }} vs {{ item.rhs }}
    </div>
  </div>
</template>

数据交互版本对比

我来解答赞 6 收藏

反馈

2 条解答

Dev · 瑞瑞 Lv1

这个问题我也遇到过，一般这样处理：

1. 先用 deep-diff 或者 jsondiffpatch 获取差异数据
2. 把JSON数据转换成树形结构展示，比直接平铺要好
3. 用递归组件处理嵌套对象

推荐用 jsondiffpatch 这个库，它自带了可视化组件。安装后可以这样用：

import jsondiffpatch from 'jsondiffpatch';

import 'jsondiffpatch/dist/formatters-styles/html.css';



// 对比数据

const delta = jsondiffpatch.diff(oldData, newData);



// 渲染差异

this.diffHtml = jsondiffpatch.formatters.html.format(delta, oldData);

模板里直接用：

<div v-html="diffHtml"></div>

如果非要自己实现，可以这样搞：
1. 遍历差异结果，给有变化的属性加标记
2. 用递归组件渲染嵌套结构
3. 通过CSS给变化部分加背景色

比如递归组件大概长这样：

// DiffItem.vue

<template>

  <div>

    <div v-if="isObject">

      <diff-item 

        v-for="(value, key) in data"

        :key="key"

        :data="value"

        :path="[...path, key]"

      />

    </div>

    <div v-else :class="{ 'highlight': isChanged }">

      {{ data }}

    </div>

  </div>

</template>

吐槽一句，自己实现真的挺麻烦的，不如直接用现成方案。除非产品经理特别要求自定义样式，否则别折腾自己。

2026-03-10 13:17

爱学习的诗雅 Lv1

这个需求我之前也做过，deep-diff确实能拿到差异数据，但直接渲染出来确实很乱。建议用递归组件来处理嵌套结构，这样展示会更清晰。

首先安装两个库：

npm install deep-diff vue-json-compare

然后可以这样实现：

// 主组件

import { diff } from 'deep-diff'

import JsonCompare from 'vue-json-compare'



export default {

  components: { JsonCompare },

  data() {

    return {

      oldData: { /* 原始数据 */ },

      newData: { /* 修改后数据 */ }

    }

  },

  computed: {

    diffResult() {

      return diff(this.oldData, this.newData)

    }

  }

}

模板改成这样：

<json-compare

  :oldData="oldData"

  :newData="newData"

  :diff="diffResult"

/>

CSS的话可以这样定义差异样式：

.json-diff-added {

  background-color: #e6ffec;

  color: #22863a;

}

.json-diff-removed {

  background-color: #ffebe9;

  color: #cb2431;

}

.json-diff-changed {

  background-color: #fffbdd;

}

vue-json-compare这个库已经帮你处理了递归渲染的问题，比手动写v-for要省事多了。它会把新增字段标绿，删除字段标红，修改的字段标黄，嵌套结构会自动展开。

如果不想用第三方库，自己写递归组件也行，但处理各种边界情况会比较麻烦，特别是数组差异的情况。我建议先用现成方案，真有特殊需求再考虑自己造轮子。

2026-03-08 14:03