問題： 在使用 vue 進行開發的過程中，可能會遇到壹種情況：當生成vue實例後，再次給數據賦值時，有時候並不會自動更新到視圖上去。也就是 如果在實例創建之後添加新的屬性到實例上，它不會觸發視圖更新。
案例：
當點擊按鈕後頁面：
[圖片上傳失敗...(image-377e69-1637720296752)]
當點擊按鈕後控制臺：
原因：
受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉為 getter/setter，所以 屬性必須在 data 對象上才能讓 Vue.js 轉換它，才能讓它是響應的。
因此：
Vue 不能檢測以下變動的數組：
當妳利用索引直接設置壹個項時，例如：vm.items[indexOfItem] = newValue
當妳修改數組的長度時，例如：vm.items.length = newLength
eg：
使用 this.arr[0] 去更新 array 的內容，視圖沒有刷新
使用 Vue.set(this.arr, 0, !this.arr[0]) 去更新 array 的內容，視圖被刷新
使用 this.arr[0] = !this.arr[0] 和 this.obj.a = !this.obj.a 同時更新，視圖被刷新
結論：
如果方法裏面單純的更新數組 Array 的話，要使用 Vue.set()；
如果方法裏面同時有數組和對象的更新，直接操作 data 即可;
每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。
受現代 JavaScript 的限制 (而且 Object.observe 也已經被廢棄)，Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。
3.1 通過 Vue.set() 改寫
語法：
當點擊按鈕後頁面：
[圖片上傳失敗...(image-6f4696-1637720296752)]
當點擊按鈕後控制臺：
3.2 通過 $set() 改寫
語法：
當點擊按鈕後頁面：
當點擊按鈕後控制臺：
3.3 Vue.set() 和 this.$set() 的區別
Vue.set() 源碼：
this.$set() 源碼
文章轉自 Vue 中 $set() 與 Vue.set() 原理及使用