关于javascript:Axios从接口取回数组数据并遍历添加自己需要的属性

外围点：嵌套对象增加响应式 property

在理论开发中，咱们常常会遇到上面这个场景：
从后端同学的接口里申请到的数据，不免不能满足本人的应用，这时候咱们须要遍历这些数据，增加上本人须要的属性 ，而后美滋滋的进行渲染~
可是这个时候常常会呈现预期之外的谬误：

• 首先就是咱们获取到的数据，在进行模板渲染的时候，可能会报错，新增加的某某属性找不到。
• 或者当咱们增加一个相似于 CheckBox 的checked属性时，在进行选中状态的切换时，最后赋值的属性值（例如false）不会被扭转，也就是没有触发 vue 的双向数据绑定。

这时候怎么办呢？上面提供 两种解决办法，

1. 在给 data 里的数据赋值之前，遍历接口返回的数据

   /*
   假如 getList 为咱们获取数据的接口，返回一个数组列表
   返回格局：[
       {
           time: 1 个月,
           price: 2000
       },
       {
           time: 2 个月,
           price: 3000
       },
       {
           time: 3 个月,
           price: 4000
       }
   ]
   最终要进行模板渲染的 data 里的变量：myData
   */
   this.getList().then(res=>{
       // 留神 上面这种写法会导致下面的谬误~
       this.myData = res;
       this.myData.forEach(item=>{item.checked = false;})
       // 上面代码为正解
       res.forEach(item=>{item.checked = false;})
       this.myData = res;
   })

2. 应用 vm.$set 实例办法向嵌套对象增加响应式 property

   // 语法如下：this.$set(this.someObject,'b',2)
   // 在上例中，假如咱们拿到接口返回的值后，须要立刻给 myData 赋值，就能够这样操作
   this.getList().then(res=>{
       this.myData = res; // 立刻赋值
       this.myData.forEach(item=>{
           // item.checked = false; 这样增加的 property 不是响应式的
           // 正解如下
           this.$sets(item, 'checked', false);
       })
   })

最初附上 Vue 响应式原理链接 深刻响应式原理。

以上内容如有谬误，欢送大家斧正。大家有更多更好的实现形式也欢送补充~~