vue3+vuetify3使用vue-diff组件进行两个yaml的比较

Vue3 和 Vuetify3 结合可以创建响应式的用户界面，而 Vue-Diff 是一个用于比较复杂数据结构（如 JSON 或 YAML）的小工具。要在项目中使用 Vue-Diff 组件来比较两个 YAML 文件，你需要按照以下步骤操作：

1. **安装依赖**:
首先，需要安装 `vue-diff` 和 `@vuelidate/core`（如果还没有的话），因为 `vue-diff` 使用了它来进行深度比较。你可以通过 npm 或 yarn 安装：

   npm install vue-diff @vuelidate/core
   # 或者
   yarn add vue-diff @vuelidate/core

2. **引入组件**:
在 Vue 组件中导入 `VueDiff` 组件并注册：

   <script setup>
     import { h, ref } from 'vue';
     import VueDiff from 'vue-diff';
   </script>

3. **设置 YAML 数据**:
创建两个 YAML 对象的引用，并在 Vue 的响应式系统中管理它们：

   <template>
     <div>
       <h3>YAML文件比较</h3>
       <pre v-model="firstYaml">{{ firstYaml }}</pre>
       <pre v-model="secondYaml">{{ secondYaml }}</pre>
       <VueDiff :leftValue="firstYaml" :rightValue="secondYaml" />
     </div>
   </template>

在 `setup()` 函数里，初始化这两个变量：

   const firstYaml = ref('');
   const secondYaml = ref('');
   // 更新 YAML 时，更新两个变量
   async function compareYamls(yaml1, yaml2) {
     firstYaml.value = yaml1;
     secondYaml.value = yaml2;
   }

4. **触发比较**:
调用 `compareYamls` 函数并传入你要比较的两个 YAML 字符串。你可以从服务端获取，或者用户输入后动态更新。