vue遇到的坑（一）——數組更新

最近在項目中遇到個問題，數組已經更新了，但是頁面中的DOM並沒有觸發變化。我一直以來的想法就是： 既然vue實現的實時數據雙向綁定，那么在model層發生了變化之后為什么就沒有在view層更新呢?  

在vue官方文檔中，發現

其中最重要的一句話就是 --- 如果對象是響應式的，確保屬性被創建后也是響應式的，同時觸發視圖更新，這個方法主要用於避開Vue不能檢測到屬性被添加的限制。

那么vue如何監聽數據的變化呢？

1）如何追蹤變化

每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

2）變化檢測問題

受現代 JavaScript 的限制（以及廢棄 Object.observe），Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。例如：

var vm = new Vue({
  data:{
  a:1
  }
})
// `vm.a` 是響應的
vm.b = 2
// `vm.b` 是非響應的

Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上：

Vue.set(vm.someObject, 'b', 2)

還可以使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名，👇是我們在項目中用過的一次，this.imgLen=3,目的使this.userImgsh=["審核成功","審核成功","審核成功"]

var _this=this
for (var i = 0; i <this.imgLen;i++) {
    if(_this.userImgsh[i] === '審核成功') continue;
        _this.$set(_this.userImgsh, i, '審核成功');
}