JSON数据对比 vue3 (可直接粘贴食用)

需求：客户想要对比上一次和这一次日志之间更新了那些配置，每次的日志有很多看起来很不方便。要求做一个左右对比的功能，并且把更新的参数单独拿出来进行展示，方便客户直接观看具体更新了那些配置项。

效果图

实现方式

下载插件

pnpm add v-code-diff -S or npm install v-code-diff -S
pnpm add vue3-json-viewer -S or npm install vue3-json-viewer -S

技术栈

	"v-code-diff": "^1.13.1",
    "vue": "^3.5.13",
    "vue3-json-viewer": "^2.2.2",

整体代码

<script setup>
import {onMounted, ref} from "vue";
import {CodeDiff} from 'v-code-diff'

import {JsonViewer} from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css";

const diffValue = ref({});

const newJson = {
  aigcFeePoint: 0,
  aigcFreeDay: 3,
  aigcFreeEndTime: null,
  aigcFreeFeePoint: 1000,
  authority: "全部",
  birthday: null,
  createEnterpriseId: null,
  createMember: null,
  createMemberName: null,
  createTime: "2024-03-11 16:51:51",
  dataStatus: "0",
  department: null,
  enterpriseAbbreviation: "汪汪国际",
  enterpriseHeadPortrait: null,
  enterpriseId: "4",
  enterpriseName: "汪汪汪国际物流有限公司",
  firstLoginTime: "2024-07-16T12:09:33.000+08:00",
  genderId: null,
  headPortrait: null,
  idNumber: null,
  jobNo: null,
  languageId: "3",
  latestLoginTime: "2025-03-14T10:33:02.000+08:00",
  mailbox: null,
  memberCode: "186288888888",
  memberFirstName: "斌",
  memberId: "2",
  memberName: "汪汪汪",
  memberNickname: "汪汪汪",
  memberSurName: "周",
  mobilephone: "186288888888",
  personalProfile: null,
  post: "互联网中心",
  qq: "269851111111",
  redeemCode: null,
  registerTime: null,
  scene: "订单单证查询",
  tenantId: "1",
  tenantName: "汪汪集团",
  updateMember: "2",
  updateMemberName: "汪汪汪",
  updateTime: "2025-03-14 10:33:02",
  wechat: "83892",
  wechatId: "83892",
  xbmId: null
}

const oldJson = {
  aigcFeePoint: 1,
  aigcFreeDay: 3,
  aigcFreeEndTime: null,
  aigcFreeFeePoint: 1000,
  authority: "全部",
  birthday: null,
  createEnterpriseId: null,
  createMember: null,
  createMemberName: null,
  createTime: "2024-03-11 16:51:51",
  dataStatus: "0",
  department: null,
  enterpriseAbbreviation: "汪汪国际",
  enterpriseHeadPortrait: null,
  enterpriseId: "4",
  enterpriseName: "汪汪汪国际物流有限公司",
  firstLoginTime: "2024-07-16T12:09:33.000+08:00",
  genderId: null,
  headPortrait: null,
  idNumber: null,
  jobNo: null,
  languageId: "3",
  latestLoginTime: "2025-03-14T10:33:02.000+08:00",
  mailbox: null,
  memberCode: "186288888888",
  memberFirstName: "斌",
  memberId: "2",
  memberName: "汪汪汪",
  memberNickname: "汪汪汪",
  memberSurName: "周",
  mobilephone: "186288888888",
  personalProfile: null,
  post: "互联网中心",
  qq: "269851111111",
  redeemCode: null,
  registerTime: null,
  scene: "用户权限",
  tenantId: "1",
  tenantName: "汪汪集团",
  updateMember: "2",
  updateMemberName: "汪汪汪",
  updateTime: "2025-03-14 10:33:02",
  wechat: "83892",
  wechatId: "83892",
  xbmId: 1,
  name_T: "XO"
};

const newResult = JSON.stringify(newJson);
const oldResult = JSON.stringify(oldJson);

const handleDiff = (diff) => {
  console.log("新增、删除、是否发生变化", diff);
};

function deepDiff(obj1, obj2) {
  const diff = {};

  function compare(o1, o2, path = '') {
    for (let key in o1) {
      if (!o2.hasOwnProperty(key)) {
        diff[path + key] = { from: o1[key], to: undefined };
      } else if (typeof o1[key] === 'object' && typeof o2[key] === 'object') {
        compare(o1[key], o2[key], path + key + '.');
      } else if (o1[key] !== o2[key]) {
        diff[path + key] = { from: o1[key], to: o2[key] };
      }
    }
    for (let key in o2) {
      if (!o1.hasOwnProperty(key)) {
        diff[path + key] = { from: undefined, to: o2[key] };
      }
    }
  }

  compare(obj1, obj2);

  return diff;
}

// 将数据转换成我想要的数据格式
function convertObj(obj) {
  const newObj = {};

  for (let key in obj) {
    const { from, to } = obj[key];
    // 如果 from 是 undefined，使用 from，否则使用 from
    if (from === undefined) {
      newObj[key] = from;
    } else if (to === undefined) {
      newObj[key] = from;
    } else {
      newObj[key] = from;  // 如果 from 和 to 都有值，使用 from
    }
  }
  return newObj;
}
const value = ref();
onMounted(()=>{
  diffValue.value = deepDiff(newJson, oldJson);
  value.value = convertObj(diffValue.value);
  console.log("diffValue.value", diffValue.value)
  console.log("value.value", value.value)
})

</script>

<template>
  <CodeDiff
      :language="json"
      :old-string="oldResult"
      :new-string="newResult"
      output-format="side-by-side"
      forceInlineComparison
      @diff="handleDiff"
  >
  </CodeDiff>
  <h4>两次对比之后修改的属性如下：</h4>
  <JsonViewer :value="value" copyable boxed sort expanded />
</template>

文档

vue3-json-view

v-code-diff

结语

让自己进入一片雪，一片叶，一片云，让自己平和安乐是一种修行。