Javascript VueJS计算返回最佳实践

我一遍又一遍地使用这个代码。不知道有没有更好的办法走这条捷径

下面是一个例子

// items.js

export default [
  { title: 'ABC', href: 'javascript:void(0)' },
  { title: 'DEF', href: 'javascript:void(0)' }
]

//index.vue
从“./items.js”导入项目
导出默认值：{
计算：{
链接（）{
让结果=[]
items.forEach（（项目，索引）=>{
item.id=索引
结果：推送（项目）
})
返回结果
}
}
}
//返回的结果={title:'ABC'，href:'javascript:void（0）'，id:0}

我只想将id添加到computed属性中的每个对象，这样我就不用担心在items中使用

v-for=“（item，index）”：key=“index”

。而只是在模板中使用

v-for=“links中的项”：key=“item.id”

问题是：

从代码中，您可以看到我声明了空的结果数组

let results=[]

，然后在返回结果之前从forEach数据填充结果。在返回生成的数据数组之前，返回每个循环数据而不声明空数组并填充它，这样做是否更好

有时，我不只是添加id，还可能添加另一个类似

item.internal=true

。如果是多层次的，也可以是多层次的

---

您可以使用

map

方法和spread运算符将

id

添加到

项中

：

 computed: {
    links() {
       return  items.map((item,index)=>({id:index,...item}))
    }
  }

---

这是

id

属性的唯一用途吗？实际上，您只是在用一个变量名交换另一个变量名，并引入了不必要的复杂性，而且可能会在以后的过程中恢复。此外，由于

项

从未更改，因此没有太多理由将其设为

计算的

属性。最好将

链接放到
data（）
中，并在
mounted（）
中进行赋值/映射。本质上只是一个ID，但其中一些需要更多。如果有一个孩子我需要初始showchild=false，内部数据，需要转换日期格式&等等，你还使用
ID
属性做什么？如果唯一的原因是v-for键有一个唯一的值，那么最好还是在v-for中像以前一样执行它。如果在安装组件时需要，您仍然可以映射额外的数据。谢谢，这项工作。我可以知道有没有多层次的地图。示例数据：
{title:'ABC'，href:'javascript:void（0）'，child:[title:'XYZ']}
。此外，它还能够在map内执行if，else逻辑？您可以这样做
items.map（（item，index）=>（{id:index，child:[{title:'XYZ'}]，…item}））
 computed: {
    links() {
       return  items.map((item,index)=>({id:index,...item}))
    }
  }