Vue 不能检测到对象属性的添加或删除

官网——深入响应式原理中介绍到：受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

var vm = new Vue{
    el: "#app",
    data:{
        a:1
    }
}


// `vm.a` 是响应的
// `vm.b` 不是响应的

上面的a是响应式的，所以a的改变后会自动渲染页面；
但是b是在vm实例创建之后添加的属性，所以他不是响应式的，当我们改变b的值的时候，通过DevTool看到的数据并不会改变，除非我们在DevTool中刷新数据，而且页面也不会刷新。

有三种解决方案：
var vm = new Vue{
el: “#app”,
data:{
obj:{
name: “aaa”
}
}
}

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

Vue.set(vm.obj,“sex”,“man”)
2、方案二：利用this.$set(this.object,key,value)

this.$set(this.obj,“sex”,“man”)
3、方案三：利用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>

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这种方法不能响应式更新视图层。

<div>
    <div v-for="(item, index) in dataarr" :key="index">
      <span>{{item.ceshi}}---</span>
      <span class="xiugia" @click="xiugiaClick(index)">删除</span>
    </div>
  </div>
data () {
    return {
      dataarr: [
        { ceshi: '娃哈哈', id: '1' },
        { ceshi: '粽子', id: '2' },
        { ceshi: '可乐', id: '3' }
      ]
    }
  },
  methods: {
    xiugiaClick (index) {
      // 响应式的数据
      this.$delete(this.dataarr, index)
      console.log(this.dataarr)
    }
  }