Vue數據響應原理

官方的解釋很清晰：

當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是ES5 中一個無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。 用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制臺在打印數據對象時 getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。 每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。 

總結：

1.數組更改值或者增加刪除值，不會觸發更新。
2.對象更改值可觸發更新，增加或者刪除屬性不會觸發更新。
3.對象數組：數組中的對象更改值會觸發更新。

一、純數組-------showArr:[true,true]

數組中元素直接賦值，---不觸發刷新

this.showArr[0]=!this.showArr[0];

數組修改后整體賦值，---不觸發刷新

var parr=this.showArr;parr[0]=!parr[0];this.showArr=parr;

數組重新復制出一份新的，修改后整體賦值，---可觸發刷新

var parr=this.showArr.slice(0);parr[0]=!parr[0];this.showArr=parr;

用$set賦值，---可觸發刷新

this.$set(this.showArr,0,!this.showArr[0])

二、純對象-------showArr:{'showBool':true}

對象中元素直接賦值，---可觸發刷新

this.showArr['showBool']=!this.showArr['showBool'];

對象修改后整體賦值，---可觸發刷新

var parr=this.showArr;parr['showBool']=!parr['showBool'];this.showArr=parr;

用$set賦值，---可觸發刷新

this.$set(this.showArr,'showBool',!this.showArr['showBool']);

三、 對象數組-------showArr:[{'showBool':true},{'showBool':true}]

數組中元素直接賦值，---可觸發刷新

this.showArr[0]['showBool']=!this.showArr[0]['showBool'];

數組修改后整體賦值，---可觸發刷新

var parr=this.showArr;parr[0]['showBool']=!parr[0]['showBool'];this.showArr=parr;

數組重新復制出一份新的，修改后整體賦值，---可觸發刷新

var parr=this.showArr.slice(0);parr[0]['showBool']=!parr[0]['showBool'];this.showArr=parr;

用$set賦值，---可觸發刷新

this.$set(this.showArr[0],'showBool',!this.showArr[0]['showBool']);