外围点：嵌套对象增加响应式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响应式原理链接 深刻响应式原理。

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