Object.entries方法的使用

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。

有以下需求：

let cpuData = reactive([
  { label: '总量', content: 'test' },
  { label: '已使用', content: 'test' },
  { label: '未使用', content: 'test' }
])
 
<el-form label-position="left" label-width="auto" class="center">
     <el-form-item v-for="item in cpuData" :key="item.content" 
        :label="item.label">{{item.content}}</el-form-item>
</el-form>

效果如下：

但是content的数据是从后端传来的（即图中的test），写成以上的数据结构后端不好传值，

只能cpuData[0].content='XXX'，cpuData[1].content='XXXX'，这样语义性不好，后面不好维护

改进方法---------------------------------------------------------------------------------------------------------------

let memoryData =reactive( {
  'Num':{label: '总量', content: 'test'},
  'Use':{label: '已使用', content: 'test'},
  'unUse':{label: '未使用', content: 'test'}
})
 
<el-form label-position="left" label-width="auto" class="center">
     <el-form-item v-for="item in Object.entries(memoryData)" :key="item[1].content" 
        :label="item[1].label">{{item[1].content}}</el-form-item>
</el-form>

这样的话，既可以循环，赋值的时候语义性也更好，memoryData.Num.content='XXX'