踩坑少年歡樂多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解決。具體請看官方文件