vue实现差异文本高亮展示（jsdiff实现变更前后对比）

最近做企业信用管理模块，需要展示企业信息变更内容，达到对比效果。
选用diff库：https://github.com/kpdecker/jsdiff

文本

变更前

变更后

建筑工程建筑工程、矿山工程、冶金工程、石油化工工程、市政公用工程、公路工程、电力工程施工总承包、建筑机电安装工程、建筑装修装饰工程、防水防腐保温工程、起重设备安装工程、环保工程、隧道工程、消防设施工程、输变电工程、钢结构工程专业承包、园林绿化工程施工；建筑施工劳务；煤炭行业（矿井、选煤厂）设计、建筑行业（建筑工程、人防工程）设计；岩土工程勘察、固体矿产勘察；地质钻探；道路普通货物运输，货物专用运输（罐式容器），大型物件运输（一类）；承包境外建筑工程及境内国际招标工程，以及上述境外工程所需的设备、材料出口，对外派遣实施上述境外工程所需劳务人员；水泥制品制造；铁路专用设备及器材、配件制造；房地产开发，商品房销售。以下范围限分支机构经营：房屋、设备租赁；机械制造、维修；木质防火门生产销售；冷轧带肋钢筋制造；工程测量；地籍测绘。物资材料、设备购销；仓储保管；装卸。

建筑工程、矿山工程、冶金工程、石油化工工程、市政公用工程、公路工程、电力工程施工总承包；建筑机电安装工程、建筑装修装饰工程、防水防腐保温工程、起重设备安装工程、环保工程、隧道工程、消防设施工程、输变电工程、钢结构工程专业承包；园林绿化工程施工；建筑施工劳务；煤炭行业（矿井、选煤厂）设计、建筑行业（建筑工程、人防工程）设计；岩土工程勘察、固体矿产勘察、地质钻探；道路普通货物运输、货物专用运输（罐式容器）、大型物件运输（一类）；承包境外建筑工程及境内国际招标工程，以及上述境外工程所需的设备、材料出口，对外派遣实施上述境外工程所需劳务人员；水泥制品制造；铁路专用设备及器材、配件制造；房地产开发，商品房销售；房屋租赁。以下范围限分支机构经营：房屋、设备租赁；机械制造、维修；木质防火门生产销售；冷轧带肋钢筋制造；工程测量；地籍测绘。物资材料、设备购销；仓库保管；装卸。涉及许可经营项目，应取得相关部门许可后方可经营

效果图

实现

安装

npm install diff --save

导入库

const Diff = require('diff')

定义data

data () {
    return {
      resultStr: []
    }
  },
  mounted () {
    const d = Diff.diffChars('变更前内容'
    , '变更后内容')
    console.log(d)
    this.resultStr = d
  }

这里的d是一个数组，记录了每一个字符是保持不变、增加、减少。因此实现上述的变更前、后对比只需要调用一次diffChars方法即可，然后遍历数组进行判断展示。
标签展示方式如下：

这里可以再做优化，首先v-show可以优化为v-if，不往页面渲染；其次由于已经有了这个显隐判断，那么在显隐判断中已经隐藏的就不必在三元运算符中再写了
<span
  v-for="(item,index) in resultStr"
  :key="index"
  v-show="!item.removed"
  :class="item.added ? 'green' :item.removed ? 'red' : 'grey'">{{ item.value }}</span>
分割线<hr/>
<span
  v-for="(item,index) in resultStr"
  :key="index"
  v-show="!item.added"
  :class="item.added ? 'green' :item.removed ? 'red' : 'grey'">{{ item.value }}</span>

定义css样式，可以针对新增的、删除的、不变的各自定义样式

.green {
  color: #f00;
}
.red {
  color: #f00;
}