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

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

交互

我在做一个配置管理功能，需要对比用户修改前后的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>

数据交互版本对比

我来解答赞 3 收藏

反馈

1 条解答

爱学习的诗雅 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