Vue3文本差异对比器实现方案

本文将介绍本项目中 文本差异对比器 (Text Diff Checker) 工具的技术实现细节。该工具基于 Vue 3 框架开发，核心对比逻辑采用原生的 JavaScript 实现，通过动态加载的方式与 Vue 组件进行交互。

在线工具网址：https://see-tool.com/diff-checker
工具截图：

1. 架构设计

为了保证核心算法的独立性和复用性，我们将 Diff 算法逻辑封装在 public/js/diff-checker.js 中，而 Vue 组件 pages/diff-checker.vue 仅负责 UI 交互和数据展示。

• 数据层 (Core JS): 负责文本的预处理、Diff 算法计算、HTML 渲染字符串生成以及统计信息计算。
• 视图层 (Vue): 负责用户输入、选项配置、调用核心方法并展示结果。

2. 核心算法实现 (diff-checker.js)

核心逻辑是一个基于 最长公共子序列 (LCS, Longest Common Subsequence) 的 Diff 算法。

2.1 文本预处理与并在

根据用户选择的“对比模式”，我们将输入文本分割成不同的单元：

• 行模式 (Line): 使用 split('\n') 按换行符分割。
• 词模式 (Word): 使用 split(/\s+/) 按空白字符分割。
• 字符模式 (Char): 使用 split('') 逐字符分割。

同时，根据配置选项处理“忽略空格”和“忽略大小写”：

if (ignoreWhitespace) {
   
    processedText1 = processedText1.replace(/\s+/g, ' ').trim();
    processedText2 = processedText2.replace(/\s+/g, ' ').trim();
}
// 忽略大小写则统一转为小写

2.2 LCS 算法与回溯

使用动态规划构建 DP 表，计算最长公共子序列的长度：

// DP 表构建
for (let i = 1; i <= m; i++) {
   
    for (let j = 1; j <= n; j++) {
   
        if (arr1[i - 1] === arr2[j - 1]) {
   
            dp[i][j] = dp[i - 1][j - 1] + 1;
        } else {
   
            dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
        }
    }
}

构建完成后，通过回溯 (Backtrack) 找出具体的 LCS 路径。

2.3 构建 Diff 结果

根据 LCS 路径，遍历原始序列，确定哪些部分是“新增 (added)”、“删除 (removed)”或“未变 (unchanged)”。

• 如果当前元素在 LCS 中，标记为 unchanged。
• 如果原序列中有但 LCS 中没有，标记为 removed。
• 如果新序列中有但 LCS 中没有，标记为 added。

2.4 结果渲染

为了提高性能，Diff 的结果直接由 JS 生成 HTML 字符串，而不是在 Vue 中使用 v-for 渲染成千上万个 DOM 节点。生成的 HTML 包含了行号、差异标识（+/-）以及高亮样式类。

/* 生成的 HTML 结构示例 */
<div class="diff-line diff-line-removed">
  <span class="diff-line-number">1</span>
  <span class="diff-line-number"></span>
  <span class="mr-2">-</span>
  Content
</div>

3. Vue 组件实现 (diff-checker.vue)

3.1 动态加载脚本

Vue 组件在挂载或需要使用时，通过创建 <script> 标签动态加载核心 JS 文件。为了防止重复加载，我们通过检查 window.DiffChecker 是否存在来判断。

const loadDiffCheckerScript = () => {
   
  if (window.DiffChecker) return Promise.resolve();
  // 创建 script 标签加载 /js/diff-checker.js
  // 监听 onload 和 onerror 事件
}

3.2 调用对比

当用户点击“开始对比”时，组件收集 leftText、rightText 以及 compareMode、ignoreWhitespace 等选项，调用核心对象的 compare 方法：

const result = window.DiffChecker.compare(leftText.value, rightText.value, compareMode.value, {
   
  ignoreWhitespace: ignoreWhitespace.value,
  ignoreCase: ignoreCase.value,
  showLineNumbers: showLineNumbers.value
})

3.3 结果展示

核心方法返回的 result 对象中包含了 diffHtml（差异内容的 HTML）和 statisticsHtml（统计信息的 HTML）。Vue 组件直接使用 v-html 指令将其渲染到页面上：

<div v-if="statisticsHtml" v-html="statisticsHtml"></div>
<div ref="diffOutput" v-html="diffOutputHtml"></div>

通过这种 Vue 处理交互 + 原生 JS 处理计算密集任务的分离模式，我们既保持了前端框架的开发效率，又保证了对比功能的性能与灵活性。