浅谈 Vue2 数组对象新增属性，响应式失效问题

需求

在工作中我们可能有这样的需求，就是对数据进行改造，有时我们需要对原来的数据添加一些额外属性，以达到控制页面的效果。

需求如下（简单举例）：

我们需要对页面进行点击，对点击到的数据进行变色，最后在提交的时候，我们需要把这些变色的数据提取出来，应该怎么做呢？

这个时候就需要对原始数据进行改造了，我们需要在原始的数据结构上面添加一个 checked 属性来标识是否进行点击或者选中，默认为 false，点击之后为 true，最后通过 filter 把 checked 为 true 的筛选出来即可，接下来演示一下。

    this.dataBack = [
      {
        value: '测试',
      },
      {
        value: '测试',
      },
    ]
    this.dataBack.forEach((item) => {
      item.checked = false
    })

可以看到，数据已经改造成功。 

接下来我们拿到数据后就可以进行相关的点击操作了，下面是实现代码。

  <div>
    <div v-for="(item, index