對象 this.$set（obj, key, value）

我們想在當前對象添加新屬性時，視圖層并未更新顯示這個新屬性。

代碼如下：

template片段

script片段

瀏覽器顯示

這是由于受JavaScript 的限制，vue.js 不能監(jiān)聽對象屬性的添加和刪除，因為在vue組件初始化的過程中，會調用 getter 和 setter 方法，所以該屬性必須是存在在data 中，視圖層才會響應該數據的變化。

解決方案1：

使用 this.$set（object，key，value）

script片段

瀏覽器顯示

解決方法2：

使用 Object.assign（target，sources）

script片段

瀏覽器顯示

以上兩種方法，都可以看到它的對象身上多了 set，get 方法，所以下次再操作就可以看到視圖的變化。

集合 this.$set（array, index, object）

template片段

script片段

瀏覽器顯示

瀏覽器顯示