1.問題描述：對兩個文件的文本進行差異比對，文件大小為：小于5M。

2.前端組件調研：

①vue-code-diff：優點：該組件可一次渲染所有差異（差異行有紅色和綠色的背景色），差異一目了然。缺點：文本量大時，例如10000行，頁面直接崩潰，所以該組件不適合數據量大的文本。不符合要求。

②vue-codemirror :優點:vue-codemirror搭配diff-match-patch可進行大數據量的文本比對（幾百萬行也不在話下）。缺點：滾動渲染，不會一次渲染所有差異，而是滾動到哪里，稍停片刻，或者緩慢滾動，才會看到差異（差異行有淡黃色背景色，差異文字有紅色和綠色波浪線）。所以，拖動滾動條過快時，可能差異還沒渲染出來，就已經滾動過去了，不能一目了然的知道有幾處差異。

3.解決方案：鑒于vue-code-diff對大數據量不不友好，直接pass掉。選用vue-codemirror搭配diff-match-patch。為了改善“滾動渲染，不會一次渲染所有差異，不能一目了然的知道有幾處差異”的缺點，增加文字描述，示例如下：共4處差異，每處差異的開始行號為：2、589、2904、12328。這樣用戶可拖動滾動條到這些行，當滾動停止時，差異渲染出來，可看到這些行的具體差異。

4.實現效果：

使用codeMorror進行文本比對

使用codeMirror實現文本比對

5.實現步驟如下：

（1）安裝插件

npm install vue-codemirror@4.0.6 -S npm install diff-match-patch -S

（2）導入包

import { codemirror } from "vue-codemirror"; require("codemirror/mode/javascript/javascript.js"); import CodeMirror from "codemirror"; import "codemirror/lib/codemirror.css"; import "codemirror/addon/merge/merge.js" import "codemirror/addon/merge/merge.css" import DiffMatchPatch from "diff-match-patch"; window.diff_match_patch = DiffMatchPatch; window.DIFF_DELETE = -1; window.DIFF_INSERT = 1; window.DIFF_EQUAL = 0;

（3）template中

<div><div>{{ diffDescription }}</div><div ref="contrastDiv"></div> </div>

（4）script中

data() {return {leftText: "", //左側展示文本rightText: "", //右側展示文本diffDescription: "", //差異內容描述};},mounted() {this.prepareData()this.contrast();},methods: {prepareData(){for(let i=0;i<10;i++){this.leftText+='a\n'this.rightText+='b\n'}for(let i=0;i<100;i++){this.leftText+='a\n'this.rightText+='a\n'}for(let i=0;i<10;i++){this.leftText+='abbbbbbbbbbfadsfasfasfasfasfadsfadsfds\n'this.rightText+='bweefdrrsxsssffasfsadfadsfadsfadsfasdfa\n'}for(let i=0;i<10000;i++){this.leftText+='bbb\n'this.rightText+='bbb\n'}for(let i=0;i<10;i++){this.leftText+='a\n'this.rightText+='b\n'}},contrast() {this.$nextTick(() => {const target = this.$refs.contrastDiv;target.innerHTML = "";let difference = CodeMirror.MergeView(target, {value: this.leftText,originLeft: null,orig: this.rightText,lineNumbers: true,mode: "text/html",hightlightDifference: true,connect: "align",readOnly: true,theme: "dracula",smartIndent: true,});let diffCount = difference.right.chunks.length;console.log(diffCount)let description = "";if (diffCount === 0) {description = "左右文本內容一致";} else if (diffCount === 1) {description ="共1處差異，差異的開始行號為：" +(difference.right.chunks[0].origFrom + 1);} else {description = "共" + diffCount + "處差異，每處差異的開始行號為：";for (let i = 0; i < diffCount; i++) {description += difference.right.chunks[i].origFrom + 1;if (i !== diffCount - 1) {description += "、";}}}this.diffDescription=description});},},

有需要的小伙伴快去試試吧！?

總結

以上是生活随笔為你收集整理的Vue:使用vue-codemirror编写文本比对功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。