vue 数组对象提取_vue中使用对象数组的最佳实践

前言：

在平常的开发中，经常会在vue中用到对象数组，如渲染一个小区的列表，数据结构可能如下所示：

CommunityList: [

{

_id: '',

community_code: '',

community_name: '',

...

},

...

]

当需要实现选择某几个小区加入收藏列表的时候，页面上往往需要增加el-checkbox来勾选，在数据结构上需要增加一个类似relation属性来标志该小区是否被选择。

所以在从接口拿到数据的时候需要在数据上增加relation属性，处理方式可能如下所示：

/** result是从接口获取的数据 **/

if (result && result.retCode === 0) {

this.communityList = result.list.map(item => {

item.relation = false;

return item;

})

}

当你碰巧在处理数据之前先将result.list赋值给了另一个实例属性，如下所示：

/** result是从接口获取的数据 **/

if (result && result.retCode === 0) {

this.communityListCache = result.list; // 新增的代码