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一样。