vue实现文件对比

实现文件对比功能

在Vue中实现文件对比功能，可以使用现成的库或自定义实现。以下是两种常见方法：

使用现成的对比库

推荐使用diff-match-patch或jsdiff库，这些库专门用于文本差异比较。安装jsdiff：

npm install diff

在Vue组件中使用：

import * as Diff from 'diff';

export default {
  data() {
    return {
      oldText: '旧文本内容',
      newText: '新文本内容',
      diffResult: []
    };
  },
  methods: {
    compareText() {
      const diff = Diff.diffChars(this.oldText, this.newText);
      this.diffResult = diff;
    }
  }
};

模板部分：

<div v-for="(part, index) in diffResult" :key="index" 
     :class="{ 'added': part.added, 'removed': part.removed }">
  {{ part.value }}
</div>

<style>
.added { background-color: lightgreen; }
.removed { background-color: pink; }
</style>

自定义简单对比实现

对于简单需求，可以手动实现基础对比逻辑：

export default {
  data() {
    return {
      file1: '',
      file2: '',
      differences: []
    };
  },
  methods: {
    compareFiles() {
      const lines1 = this.file1.split('\n');
      const lines2 = this.file2.split('\n');

      this.differences = [];
      const maxLength = Math.max(lines1.length, lines2.length);

      for (let i = 0; i < maxLength; i++) {
        if (lines1[i] !== lines2[i]) {
          this.differences.push({
            line: i + 1,
            old: lines1[i] || '',
            new: lines2[i] || ''
          });
        }
      }
    }
  }
};

处理文件上传

实现文件上传对比功能：

<input type="file" @change="handleFile1">
<input type="file" @change="handleFile2">
<button @click="compareFiles">对比</button>

methods: {
  handleFile1(e) {
    this.readFile(e.target.files[0], 'file1');
  },
  handleFile2(e) {
    this.readFile(e.target.files[0], 'file2');
  },
  readFile(file, target) {
    const reader = new FileReader();
    reader.onload = (e) => {
      this[target] = e.target.result;
    };
    reader.readAsText(file);
  }
}

高级对比功能

对于需要语法高亮的代码对比，推荐使用monaco-editor：

npm install monaco-editor

配置对比编辑器：

import * as monaco from 'monaco-editor';

export default {
  mounted() {
    this.initDiffEditor();
  },
  methods: {
    initDiffEditor() {
      const originalModel = monaco.editor.createModel('旧内容', 'text/plain');
      const modifiedModel = monaco.editor.createModel('新内容', 'text/plain');

      this.diffEditor = monaco.editor.createDiffEditor(
        document.getElementById('diff-container'),
        {
          readOnly: true,
          automaticLayout: true
        }
      );

      this.diffEditor.setModel({
        original: originalModel,
        modified: modifiedModel
      });
    }
  }
};

性能优化建议

处理大文件时考虑分块比较，避免UI阻塞：

async function compareLargeFiles(content1, content2) {
  const chunkSize = 1000;
  const chunks1 = content1.match(new RegExp(`.{1,${chunkSize}}`, 'g')) || [];
  const chunks2 = content2.match(new RegExp(`.{1,${chunkSize}}`, 'g')) || [];

  let differences = [];

  for (let i = 0; i < Math.max(chunks1.length, chunks2.length); i++) {
    await new Promise(resolve => {
      setTimeout(() => {
        const diff = Diff.diffChars(chunks1[i] || '', chunks2[i] || '');
        differences = differences.concat(diff);
        resolve();
      }, 0);
    });
  }

  return differences;
}