Vue2.x 踩坑记录（持续更新）

踩坑少年欢乐多0.0

记录下自己开发过程中遇到的坑，避免以后遇到了又一脸懵逼。（之前已经踩过很多坑了，没有及时记录，之后优化代码的时候再看到或者后续开发中遇到坑会更新到文章中。）

• computed修改data返回的数据

出处是黄神的课程，源码是vue1.x，在2.x版本就会有这个问题，但项目还是可以正常跑起来的。

修改方法很简单，官方API写的很明白了，给出官方示例：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

计算属性默认只有getter，示例中计算属性aDouble依赖vm.a，当vm.a发生变化时，所以依赖vm.aDouble的绑定也会更新。给出的错误代码中就是因为在计算属性listShow的getter中修改了所依赖的fold，因此产生副作用(side-effect)。在这种情况下，我们应该给计算属性添加一个setter,就像官方示例的vm.aPlus一样。

• 列表渲染，数组更新检测

源码是这样的，我想通过点击事件修改flagMap中的值，进而控制对应列表的展示隐藏。结果是数组更新了，但是v-show状态并未改变。

问题原因在于，Vue不能检测以下变动的数组：

1. 利用索引值设置某项的值，（上面代码展示的）
2. 修改数组长度

看一下官方给出的示例：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

解决方法如下：

toggleList(index) {
      this.$set(this.flagMap, index, !this.flagMap[index]);
    }

同样的，Vue也不能检测到对象属性的添加和删除，也可以用set解决。具体请看官方文档