标签：插件 code CodeDiff 渲染 vue vue2 diff

v-code-diff，一个 vue2/3 可用、更多特性支持的代码对比插件

代码对比是前端一个常见的需求。在 vue2 上我们有 vue-code-diff 可以使用。美中不足的是其只能支持 vue2，且依赖库含有废弃的依赖导致控制台报错，大文件 diff 时渲染速度过慢等问题，再加上我不太适宜原作者的代码结构与开发方式，因此我基于 vue-code-diff ，开发了一个 vue3/vue2 通用的 code diff 插件，且在渲染性能上有提升，也支持了一些 vue-code-diff 不支持的特性，如异步渲染，渲染前渲染后的钩子函数，以及是否支持高亮、差异级别等选项。详情可参见

https://github.com/Shimada666/v-code-diff​github.com/Shimada666/v-code-diff

介绍

我们的代码是基于 vue-code-diff 而开发的，所以我们先来介绍一下 vue-code-diff 的功能。

vue-code-diff 在线 demo 演示 vue-code-diff 在线 demo 地址​diff.xjie.me/

可以看到，vue-code-diff 支持类似 github 的 code diff 功能，还可以设置 diff 类型(line-by-line,side-by-side)，设置差异级别等功能。一般情况已经能够满足使用，但仍有一些不足：

1. 由于高亮代码是同步渲染。当代码较多时，渲染耗时较久，此时会阻塞 ui。如两个一百多行的文件做 diff，到页面显示完成总共需要大概 1.5s 左右，如果需要 diff 的内容更多时，这个时间还会再久，对用户体验是会造成比较大的影响的

2. 由于依赖上依赖了 highlight.js 9 版本，而此版本因有安全风险，已废弃，因此在控制台会有警告

3. 插件本身有一些 bug，安装最新版本后会发现样式不对、非 chrome 浏览器显示有问题， 差异级别(word, char)不生效等 bug

4. 特性较少，如不支持渲染前，渲染后的回调钩子。对于一些场景，会比较不方便

5. 不支持 vue3

基于以上原因，我基于 vue-code-diff 写了 v-code-diff 来解决上述问题。在此也对原作者表示感谢。

 

v-code-diff 带来了什么

1. 高亮代码功能使用异步渲染，大幅提高用户体验。简单来说，用户先看到页面，再看到代码变高亮这一过程。放个图感受一下

渲染过程，左边箭头指向部分是高亮到的，右边是暂时还未高亮的 加载时间

2. 使用了 highlight.js 10，提升了安全性，消除了警告。

3. 支持一些特性，如是否高亮、渲染前渲染后的钩子等，方便使用

钩子函数：打印时间

4. 同时支持 vue2、vue3。

v-code-diff 在线 demo​shimada666.github.io/v-code-diff/

如何使用？

安装 v-code-diff

# With NPM
npm i v-code-diff

# With Yarn
yarn add v-code-diff

Vue2 用户需要额外安装 composition-api

yarn add @vue/composition-api

Vue3

两种方式均可使用

使用方式1、注册为全局组件

import {createApp} from 'vue'
import CodeDiff from 'v-code-diff'

app
    .use(CodeDiff)
    .mount('#app')

然后即可使用

<template>
  <code-diff
      :old-string="'12345'"
      :new-string="'3456'"
      file-name="test.txt"
      output-format="side-by-side"/>
</template>

使用方式2、单独引入

在 vue 文件中

<template>
  <code-diff
      :old-string="'12345'"
      :new-string="'3456'"
      file-name="test.txt"
      output-format="side-by-side"/>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import {CodeDiff} from 'v-code-diff'

export default defineComponent({
  components: {
    CodeDiff
  }
})
</script>

Vue2

vue2用户需要先安装 vue-composition-api

yarn add @vue/composition-api

两种使用方式均可使用

使用方式1、注册为全局组件

全局注册

import Vue from 'vue';
import CodeDiff from 'v-code-diff'

Vue.use(CodeDiff);

接着可以在文件中调用

<template>
  <code-diff
      :old-string="'12345'"
      :new-string="'3456'"
      file-name="test.txt"
      output-format="side-by-side"/>
</template>

使用方式2、单独引入

<template>
  <code-diff
      :old-string="'12345'"
      :new-string="'3456'"
      file-name="test.txt"
      output-format="side-by-side"/>
</template>
<script>
import {CodeDiff} from 'v-code-diff'

export default {
  name: 'App',
  components: {
    CodeDiff
  }
}
</script>

结语

希望这个插件能帮到有需要的人，如果有什么好的意见或建议，也欢迎提 issue、pr 给我，谢谢。

参考

github地址​github.com/Shimada666/v-code-diff

在线演示

v-code-diff 在线演示地址​shimada666.github.io/v-code-diff/

 

标签：插件,code,CodeDiff,渲染,vue,vue2,diff
From： https://www.cnblogs.com/yang5726685/p/17104140.html