vue中如何定义对象才能使项目更好维护

原创已于 2023-09-12 11:00:45 修改 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #代码规范

于 2023-09-12 10:44:28 首次发布

文章讨论了项目重构中遇到的接口参数问题，提出使用reactive初始化对象以避免冗余键值对，以及使用typescript的强类型优势和可能带来的开发成本。

业务场景：

1、项目重构，后端不规范无法给出接口的参数。通过控制台查看请求提交的表单数据时，发现有上百个键值对。检查发现是由于初始化数据时把接口返回的所有数据都解构到了表单项中，导致项目重构陷入了困境。

2、在进行迭代时，子组件接收到一个对象类型的 prop，需要递归查看所有父组件和该状态相关的逻辑才知道这个对象包含哪些字段

已知实现方案和优劣：

1、（可选）js 对象初始化规范

在 compositionAPI 中，只允许使用 reactive 初始化对象。
- reactive 初始化的对象必须定义所有需要响应的键，可以显性的声明对象包含的键有哪些
使用 Object.keys(reactiveObj) 遍历对象进行赋值
- 遍历原有对象进行赋值可以保证没有额外的键存在对象中

// arg 用于声明哪些键是变量
const initMallAndStore = (
  arg = {
    // 商场组织号
    orgNo: '',
    // 商场名称
    orgName: '',
    // 商场简称
    orgSimpleName: '',
    // 门店编码
    shopNo: '',
    // 门店名称
    shopName: '',
    orgId: '',
    shopId: ''
  }
) => {
  return {
    ...arg,
    // 收货人
    receiver: '物流部',
    // 收货电话
    receiverTel: '020-88888888'
  }
}
const mallAndStore = reactive(initMallAndStore())
// 获取数据 res，通过 Object.keys 遍历塞入获取的数据
Object.keys(mallAndStore).forEach((key) => {
  mallAndStore[key] = res[key]
})

2、（可选）ts

优点：
- 强类型
缺点：
- 单文件组件需要插件提供支持
- 增加开发成本