Vue-給對象新增屬性（使用Vue.$set()）

在開發過程中，我們時常會遇到這樣一種情況：當vue的data里邊聲明或者已經賦值過的對象或者數組（數組里邊的值是對象）時，向對象中添加新的屬性，如果更新此屬性的值，是不會更新視圖的。

根據官方文檔定義：如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。

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

看以下實例：

<template>
     <div>
    <p @click="addd(obj)">{{obj.d}}</p>
    <p @click="adde(obj)"> {{obj.e}}</p>
</div>
</template>

 <script>
  export default {
      data(){
            return {
                obj:{}
            }
      },
      mounted() {
        this.obj = {d: 0};
        this.obj.e = 0;
        console.log('after--', this.obj);
      },
     methods: {
        addd(item) {
            item.d = item.d + 1;
            console.log('item--',item);
        },
        adde(item) {
            item.e = item.e + 1;
            console.log('item--',item);
        }
       }
  }
 </scirpt>

可以看出d屬性是有get 和 set方法的，而新增的e屬性是沒有的。

點擊觸發3次addd，點擊觸發3次adde,頁面效果及控制台信息如下

此時觸發1次addd,頁面效果如下：

 

由此可以看出，更新新增屬性e，是不會更新視圖，但是會改變其值，當更新原有屬性d時會更新視圖，同時將新增的屬性e的值也更新到視圖里邊

解決方案

官方定義：

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

Vue.set(vm.obj, 'e', 0)
您還可以使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：

this.$set(this.obj,'e',02)

有時你想向已有對象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，添加到對象上的新屬性不會觸發更新。在這種情況下可以創建一個新的對象，讓它包含原對象的屬性和新的屬性：

// 代替 Object.assign(this.obj, { a: 1, e: 2 })
this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })

上述實例解決如下：

 

點擊觸發3次addd，點擊觸發3次adde,頁面效果及控制台信息如下：