设备上问卷加载导致页面卡顿（临时办法）

src/modules/questionnaire/TierSelect.field.vue

@@ -76,13 +76,14 @@ function handle(option: QuestionnaireProps['options'][number], index: number, op
 </script>
 <template>
   <div class="grid grid-rows-1 grid-cols-5 gap-4 my-4">
-    <div v-for="(option, index) in options" :class="{checked: option.checked}"
+    <div v-for="(option, index) in options" :key="option.id"
          class="option
             flex justify-center items-center flex-wrap min-h-16
             text-lg text-primary hover:text-primary-400
             rounded-xl border border-primary hover:border-primary-400
             cursor-pointer
          "
+         :class="{checked: option.checked}"
          @click="!disabled && handle(option, index, options)"
     >
       <div class="p-2 text-center">
@@ -90,9 +91,9 @@ function handle(option: QuestionnaireProps['options'][number], index: number, op
         <span class="value" v-if="option.value">{{ option.value }}</span>
       </div>
     </div>
-    <van-dialog class="sub-dialog" v-bind="subDialog">
+    <van-dialog v-if="subDialog.show" class="sub-dialog" v-bind="subDialog">
       <div class="grid grid-rows-1 grid-cols-4 gap-4 my-12 p-12">
-        <div v-for="(option, index) in subDialog.options"
+        <div v-for="(option, index) in subDialog.options" :key="option.id"
              class="sub-option
               flex justify-center items-center min-h-16
               text-lg text-primary hover:text-white

src/modules/questionnaire/page.vue

@@ -1,69 +1,89 @@
 <script setup lang="ts">
-import { Notify }                  from '@/platform';
-import { questionnaireMethod }     from '@/request/api';
+import { Notify, Toast } from '@/platform';
+import { questionnaireMethod } from '@/request/api';
 import type { QuestionnaireProps } from '@/request/model';
-import { useRequest }              from 'alova/client';
 
 import TierSelectField from './TierSelect.field.vue';
 
-
 defineOptions({
   name: 'QuestionnairePage',
 });
 
 const router = useRouter();
 
+const first = ref(true);
+
 const showTitle = ref(true);
-const { data, loading, send } = useRequest((data) => questionnaireMethod(data), {
-  initialData: { reportId: null, questionnaires: [] },
-}).onSuccess(({ data }) => {
-  if ( data.reportId ) router.replace(`/report/${ data.reportId }`);
-});
+const loading = ref(false);
+const data = ref<QuestionnaireProps[]>([]);
+// const { data, loading, send } = useRequest((data) => questionnaireMethod(data), {
+//   initialData: { reportId: null, questionnaires: [] },
+// }).onSuccess(({ data }) => {
+//   if ( data.reportId ) router.replace(`/report/${ data.reportId }`);
+// });
 
 
-function handle(questionnaires: QuestionnaireProps[]) {
-  console.log(questionnaires);
+function handle() {
+  const questionnaires = data.value;
   const tips: string[] = [];
-  for ( const { label, required, name, options } of questionnaires ) {
-    if ( !required ) continue;
-    switch ( name ) {
+  for (const { label, required, name, options } of questionnaires) {
+    if (!required) continue;
+    switch (name) {
       case 'select':
-        if ( !options.some(op => op.checked) ) tips.push(label);
+        if (!options.some((op) => op.checked)) tips.push(label);
         break;
     }
   }
-  if ( tips.length ) {
-    Notify.warning(`问卷请补充完整\n\n${ tips.join('\n') }`);
+  if (tips.length) {
+    Notify.warning(`问卷请补充完整\n\n${tips.join('\n')}`);
   } else {
-    send(questionnaires).then(() => showTitle.value = false);
+    load();
   }
 }
+
+async function load() {
+  const _first = first.value;
+  loading.value = true;
+  try {
+    const { reportId, questionnaires } = await questionnaireMethod(data.value);
+    if (reportId) return await router.replace(`/report/${reportId}`);
+    showTitle.value = _first;
+    data.value = [];
+    // TODO 延迟渲染
+    setTimeout(() => (data.value = questionnaires), 300);
+  } catch (e) {
+  } finally {
+    loading.value = false;
+    first.value = false;
+  }
+}
+
+load();
 </script>
 <template>
   <div>
-    <template v-if="data.questionnaires.length">
+    <template v-if="data.length">
       <div v-if="showTitle" class="my-8 text-2xl text-primary text-center">
         <div>为了更全面地评估您的健康状况</div>
         <div>还需要您回答6-9个问题，耗时2-3分钟</div>
       </div>
-      <div class="m-6" v-for="item in data.questionnaires" :key="item.id">
-        <div class="text-2xl" :class="{required:item.required}">{{ item.label }}</div>
+      <div class="m-6" v-for="item in data" :key="item.id">
+        <div class="text-2xl" :class="{ required: item.required }">{{ item.label }}</div>
         <TierSelectField
           v-if="item.name === 'select'"
-          v-model:options="item.options" :multiple="item.multiple" :disabled="loading"
+          v-model:options="item.options"
+          :multiple="item.multiple"
+          :disabled="loading"
         />
       </div>
-      <van-button class="decorate" block :loading
-                  @click="handle(data.questionnaires)"
-      >提交
-      </van-button>
+      <van-button class="decorate" block :loading @click="handle()">提交</van-button>
     </template>
-    <van-toast v-else :show="loading" type="loading" message="加载中" />
+    <van-toast v-else-if="first" :show="loading" type="loading" message="加载中" />
   </div>
 </template>
 <style scoped lang="scss">
 .required::after {
-  content: "*";
+  content: '*';
   color: #f53030;
   font-size: 2rem;
 }