在 vue2 上我们有 vue-code-diff 可以使用。美中不足的是其只能支持 vue2,且依赖库含有废弃的依赖导致控制台报错,大文件 diff 时渲染速度过慢等问题,再加上我不太适宜原作者的代码结构与开发方式,因此我基于 vue-code-diff ,开发了一个 vue3/vue2 通用的 code diff 插件,且在渲染性能上有提升,也支持了...
.mount('#app') 使用 <template></template> 局部使用 在vue 文件中 <template></template>import{defineComponent}from'vue'import{CodeDiff}from'v-code-diff'exportdefaultdefineComponent({components: {CodeDiff} }) 事件 参数 实例 main.ts importCodeDifffrom'v-code-diff'// useconstapp =createApp(App)...
首先安装插件:codemirror、diff-match-patch HTML部分: 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 ...
所以,框架层面的初始化是一定会有一定的性能损耗的,以vue-cli 搭建的脚手架为例,当我初始化空的脚手架,打包后上传cdn部署,FCP 就会从0.8s提上到1.5秒,由此可见vue 的diff 也不是免费的他也会有性能上的损耗
vue 文本比较插件 最近需要加个统计日志功能,想着能把当前版本和上一版本列出来做比较,所以想到了找个对比插件,期间试过自己通过js实现,但很费事效果不理想,之后找了 https://github.com/ddchef/vue-code-diff 这个感觉也不是很合适。最终选用的下边这个,不过左右替换的功能不需要,不知如何去掉,有知道的麻烦留言...
性能问题是最难解决,如果渲染到很多视频之后,难免会有很多的video存在于dom中,这里我们采用了web抖音的方案,在整个dom中只渲染一个活动sidle的video其他的slide中渲染空节点,这样就能大大减少dom的数量,再配合vue的diff 能提供一个还算过得去的性能。 体验问题虽然不难,但是仅仅靠前端是无法解决的,需要多方配合,他...
但v-code-diff 0.x 版本(下称旧版)有一系列问题,比如语法高亮识别不准确、无法展开折叠、以及对大文本内容 diff 渲染较慢的问题。因此在后来,我开发了插件的 1.x 版本。今天,我很高兴向大家介绍全新升级的 v-code-diff 1.x 版本(下称新版),它不仅继承了旧版本的简单易用,还带来了一系列全新特性,优化了...
参考vue-code-diff (https://github.com/ddchef/vue-code-diff) 实现了git diff内容的格式化显示 使用了highlight.js插件 使用了diff2html的插件 简介 基于Vue,Element-UI实现的git code diff的可视化显示 暂无标签 NodeJS MIT 保存更改 发行版 暂无发行版 ...
vue使用diff-match-patch和codemirror实现文本对比 安装插件 npm install diff-match-patch -S npm install codemirror@5.65.5 -S 1. 2. codeMirror.vue组件: <template> </template> import CodeMirror from "codemirror"; import "codemirror/lib/codemirror.css"; import...
性能问题是最难解决,如果渲染到很多视频之后,难免会有很多的video存在于dom中,这里我们采用了web抖音的方案,在整个dom中只渲染一个活动sidle的video其他的slide中渲染空节点,这样就能大大减少dom的数量,再配合vue的diff能提供一个还算过得去的性能 体验问题虽然不难,但是仅仅靠前端是无法解决的,需要多方配合,他需要...