开发过程中需要进行两个json的对比，于是打开github找相关组件，但是很遗憾没有找到合适的Vue组件。最终找到一个开源的chrome插件FeHelper，这里面的 “json对比工具” 效果完全满足我的预期， 于是找到对应代码，封装下方便自己，也方便大家使用。

---

效果图：

• key值相同，value不同显示黄色；
• key值不同，左侧红色，右侧蓝色；

项目代码：github.com/qinxm/vue-j…

使用步骤

1. npm包安装

npm install vue-json-diff -S
or 
yarn add vue-json-diff

2. Vue代码

<template>
  <div id="app">
    <json-diff :jsonSourceLeft="leftData" :jsonSourceRight="rightData" />
  </div>
</template>

<script>
import JsonDiff from 'vue-json-diff'
export default {
  components: {
    JsonDiff
  },
  data() {
    return {
      leftData: {
      // XXX
      },
      rightData: {
      // XXX
      }
    }
  }
}
</script>

3.属性

属性	类型	描述
jsonSourceLeft	Object/String	左侧区域展示数据
jsonSourceRight	Object/String	右侧区域展示数据
showHeading	Boolean	是否显示顶部对比结果
errorHandler	Function	错误处理回调方法
diffHandler	Function	对比结果回调方法

结束

基本满足我目前的需求，如果需要自定义样式，可以自行扩展。