# vue-diff 对比两个 html 字符串

## 合并两个 html 字符串, 不删除两边任何字符, 合并所有修改、删除、新增部分并标记

> 参数: perv: string  current: string
> 返回: 合并的 html 字符串

concatHTML(prev, current) 

## 对比两个 html 字符串，对新增部分进行标记

> 参数: perv: string  current: string
> 返回: 两个 html 字符串不同部分的字符串(新增部分添加节点进行标识)

diffScreens(prev, current) 

## 两屏对比不要颜色

> 参数: html1: string  html2: string
> 返回: 合并后的 html: str

concatHTMLWithoutColor(html1: string, html2: string)

## 两屏对比塞入颜色

> 参数: html1: string  html2: string
> 返回: { newHTML1: 标记新增、修改删除后的 html1, newHTML2: 标记新增、修改删除后的 html2, Diffs: 差异部分(包含[Diffs：差异列表，DiffsCount：差异数量]) }

compareHTML(html1: string, html2: string)

## 两屏对比函数的方法，对有差异的部分进行去重和数量计算

> 参数: isDiffs: 有差异的部分
> 返回: [Diffs：差异列表，DiffsCount：差异数量

uniqText(isDiffs)

## 两屏对比函数的方法，用来计算删除、新增、编辑的数量

> 参数: arr: 有差异的部分, idx: 在解析 HTML 中的第几行, id: 标记的节点id(给有差异的部分添加 div 标签，标签的 id 部分)
> 返回: [ Diffs：差异列表，DiffsCount：差异数量 ]

computeTypes(arr: Array<any>, idx: number, id: string)

## 计算两个文本的差异部分

> 参数: perv: string  current: string
> 返回: [[0, '修改部分']] 0没有修改 1新增 -1删除

getDiffArr(prev: string, current: string)

## 问题

1 npm install 安装不上(vite 和 vitejs/plugin-vue 的版本不兼容)
npm install --force 强制安装
2 同屏滚动卡顿
因为左边滚动给右边赋值的时候右边又给左边赋值导致卡顿。
3 打包时不对 ts 做检查
package.json 中 修改 "build": "vue-tsc --noEmit -skipLibCheck && vite build" 为 vite build
4 对比出有一半的标签
对 >123< 尖括号内的字符串匹配