优化算法逻辑结构,提升性能

src/views/user_informationg/details.vue

@@ -310,34 +310,13 @@
     </el-form>
   </el-card>
 
-  <!-- <component
+  <component
     v-for="(item, card_index) in formData.datas"
     :key="item.id"
     :is="isComponent(item.category_child || item.category_id)"
     :datas="item.datas"
     :update_time="item.update_time"
-  ></component> -->
-
-  <template
-    v-for="(item, card_index) in formData.datas"
-    :key="'card' + item.id"
-  >
-    <store
-      v-if="item.category_child == 8"
-      :datas="item.datas"
-      :update_time="item.update_time"
-    ></store>
-    <plant
-      v-if="item.category_child == 7"
-      :datas="item.datas"
-      :update_time="item.update_time"
-    ></plant>
-    <breeding
-      v-if="item.category_child == 32"
-      :datas="item.datas"
-      :update_time="item.update_time"
-    ></breeding>
-  </template>
+  ></component>
 </template>
 
   <script lang="ts" setup name="test">
@@ -349,25 +328,14 @@ import plant from "./component/plant.vue";
 import { fileManagelist, fileManageDetil } from "@/api/informationg";
 const route = useRoute();
 
-const componentList = ref([
-  {
-    id: 8,
-    name: "store",
-  },
-  {
-    id: 7,
-    name: "plant",
-  },
-  {
-    id: 32,
-    name: "breeding",
-  },
-]);
+const componentList = reactive(new Map());
+
+componentList.set(7, plant);
+componentList.set(8, store);
+componentList.set(32, breeding);
 
 const isComponent = (id: any) => {
-  console.log(componentList.value.find((item) => item.id == id)?.name);
-
-  return componentList.value.find((item) => item.id == id)?.name;
+  return componentList.get(id);
 };
 
 const formData = reactive({