关于 Vue 使用的 2 个小问题， setup 和表单。

[17681880207]

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>

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

[FightPig]

用<script setup>语法糖

[realkaiway]

Vue3.2<script lang=ts setup>了解下，内部没必要在 return ，看你这数据结构该用 vuex 放的还是用

[17681880207]

@FightPig 谢谢🙏

[17681880207]

@realkaiway 谢谢🙏

[imherer]

@FightPig
@realkaiway
话说如果用 setup 的话那是用 2 个 script 标签么？
例如这样:
<script setup>
// setup 的内容
</script>

<script>
// 正常的内容
</script>

[moell]

我反正都是一项一项地写，比较直观。

[FightPig]

@imherer 一个就够 了，你可以看下 vue 的文档

[Vegetable]

script setup ，这套逻辑下其实体验非常像早年的 jQuery ，在一个组件内都是全局变量。目前我对这套最大的意见是 eslint 还不吃$ref 这些关键字