Vue 不能檢測到對象屬性的添加或刪除，注意！！！

Vue 不能檢測到對象屬性的添加或刪除

一、劃重點了：Vue 不能檢測到對象屬性的添加或刪除

官網——深刻響應式原理（https://cn.vuejs.org/v2/guide...）中介紹到：受現代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除。因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

上面的a是響應式的，因此a的改變後會自動渲染頁面；
可是b是在vm實例建立以後添加的屬性，因此他不是響應式的，當咱們改變b的值的時候，經過DevTool看到的數據並不會改變，除非咱們在DevTool中刷新數據，並且頁面也不會刷新。

有三種解決方案：

var vm = new Vue{
    el: "#app",
    data:{
        obj:{
            name: "aaa"            
        }
    }
}

一、方案一：利用Vue.set(object,key,value)

Vue.set(vm.obj,"sex","man")

二、方案二：利用this.$set(this.object,key,value)

this.$set(this.obj,"sex","man")

三、方案三：利用Object.assign({},this.obj)

this.obj.sex = "man";
this.obj = Object.assign({},this.obj)

//或者下面方式

this.obj = Object.assign({},this.obj,{"sex","man"})

DEMO實例：

<template>
  <div class="parent">
    <h1 v-show="mainData.test.boolean">{{msg}}</h1>
    <button @click="getData">數據</button>
    <select name="" id="" @change="selectChange">
      <option value="001">上海</option>
      <option value="002">北京</option>
      <option value="003">天津</option>
    </select>
    <ul>
      <li v-for="(item,index) in list" :key="index" v-show="index < 10">
        <span class="red">{{item.id}}</span>
        <strong class="blue">{{item.title}}</strong>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Parent",
  data() {
    return {
      count: 10,
      size: 1024,
      mainData: {
        test: {
          aa: 12
        }
      },
      msg: "這是測試信息",
      list: []
    };
  },
  methods: {
    getData: function() {
      var self = this;
      this.$axios.get("http://jsonplaceholder.typicode.com/posts").then(rsp => {
        self.list = rsp.data;
        self.$set(self.mainData.test, "boolean", false);
      });
    },
    selectChange: function() {
      var self = this;
      self.$set(self.mainData.test, "boolean", true);
    }
  }
};
</script>
<style scoped>
ul li {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  text-align: left;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
</style>

實現的效果以下：（使用的方案二方法）

（1）、下拉框選項改變的時候，會顯示「這是測試信息「文字

（2）、點擊」數據「按鈕，獲取數據，「這是測試信息「文字會隱藏

二、劃重點了：刪除vue實例的屬性

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

對於上述Demo實例中經過this.$set添加的屬性，經過如下方式刪除便可：

//如下這種方式能夠刪除屬性，同時會觸發數據響應式的更新

this.$delete(this.mainData.test, "boolean");

//而經過delete this.mainData.test.boolean這種方法不能響應式更新視圖層。