Question 1

使用了一段时间的 Vue3 之后，发现了一个问题，就是 setup 函数的 return 会变成非常的长（如下面的展示），想请教下大家有没有更好的办法？

setup() {   // ... 省略其他部分   return {     SOURCES,     STATUS,     getDictLabel,     moment,     filterFormRef,     filterForm,     qjConceptsInFilterForm,     handleQjConceptSearchInFilterForm,     hospitalItemsInFilterForm,     handleHospitalItemsSearchInFilterForm,     tableLoadingState,     tableData,     pagination,     total,     pageSizes,     layout,     handleTableIndex,     handleCurrentChange,     handleSizeChange,     handleSearch,     handleReset,     qjConceptsInDialog,     handleQjConceptSearchInDialog,     hospitalItemsInDialog,     handleHospitalItemsSearchInDialog,     itemForm,     itemFormRef,     itemFormRules,     itemDialog,     handleItemDialogOpen,     handleItemDialogClose,     handleItemDialogSubmission,     handleItemDelete   } } 

Question 2

大家一般在写表单的时候，是直接一项一项写（例如：代码块 1 ）还是会抽离出一个配置文件，再遍历渲染出来呀（例如：代码块 2 ）？ 代码块 1 的问题就是 template 中的代码量很大，而代码块 2 的问题就是，要定义的类型非常多，比如光 select 就要定义普通 select 和 remote-select 等等类型，如果想要覆盖全面的话，得每一种类型都全部写上。 另外，我知道每一种方法都有其优势和弊端，我只是想向大家请教下，大家主流的做法，或者有更好的解决方案？

代码块 1

<el-form :model="form">   <el-form-item     label="用户名"     prop="username">     <el-input        v-model="form.username"       placeholder="用户名"/>   </el-form-item>   <el-form-item     label="手机号"     prop="phone">     <el-input        v-model="form.phone"       placeholder="手机号"/>   </el-form-item> </el-form> 

代码块 2

// form-items.ts export default [   {     type: 'input'     label: '用户名',     prop: 'username',     placeholder: '用户名',   },   {     type: 'input',     label: '手机号',     prop: 'mobile',     placeholder: '手机号',   },   {     type: 'select',     label: '性别',     prop: 'gender',     placeholder: '性别',     options: [       {label: '女', value: 0},       {label: '男', value: 1}     ]   } ]  // template <el-form :model="form">   <el-form-item     v-for="(item, index) in formItems"     :key="index"     :label="item.label"     :prop="item.prop">     <template v-if=item.type === 'input'"">       <el-input          v-model="form.username"         placeholder="用户名"/>     </template>      <template v-if=item.type === 'select'"">       <el-select          v-model="form.username"         placeholder="用户名">         <el-option            v-for="(option, index) in item.options"           :key="index"           :label="option.label"           :value="option.value"/>       </el-select>     </template>   </el-form-item> </el-form>  

感谢大家答疑解惑，在下不胜感激！