Vue.js使用函数操作data中对象的属性不触发更新

Question

学习Vue.js框架遇到这个问题，列表渲染中的对象迭代部分，我在data中放了一个object对象，并在li元素中放了一个button元素用于删除对应迭代的属性，但是点击按钮后，object中的对应属性被删除了，但是视图中没有更新，被删除的属性还在。请问这是什么原因。

var list1 = new Vue({
    el:'#list1',
    data:{
        parentMessage:'Fuck',
        object:{
            firstName:'Coma',
            lastName:'Cc'
        }
    },
    methods:{
        remove:function(index){
            //Array.prototype.splice.call(this.object, index, 1);
            delete((this.object)[index]);
        }
    }
})

<ul id="list1">
        <li v-for="(value, key, index) in object">
            {{ index }} - {{ key }} - {{value}}
            <button v-on:click="remove(key)">Delete</button>
        </li>
    </ul>

Answer 1

修改obj,要用Object.assign方法来操作，才能让vue的对象触发变化
还有，对象一般只有修改对象属性的值，很少删除对象属性

var obj = {
    a:1,
    b:2
};
obj = Object.assign({},obj,{a:3});
obj = {
    a:3,
    b:2
};

Answer 2

Vue.js 基于 ES5 的 Getter/Setter 机制实现，只能自动监测属性的赋值，不能监测属性的删除（以及本来没有的属性的添加）。

对于 JavaScript 而言，那个属性确实被你删掉了，只是 Vue 不知道而已。

对于这两种情况，Vue 提供了 Vue.delete 和 Vue.set 两个函数来应对这种需求（在实例中，可以使用它们的别名：this.$delete 和 this.$set）。

不过在实际使用中，通常这种需求的存在表示程序设计的不合理。不过看你应该只是学习阶段的功能测试，所以还好。

注意，即便是上述的两个函数，也不能删除或添加根属性（指能够通过 this.xxx 访问的、实例化时 data 对象参数中的第一层属性），Vue 禁止这样做，按官方说法，是为了避免一些极端情况下无法监测的情况。

除了这些做法，你还可以通过赋值一个全新的（具有不同属性的）对象，来实现属性的增删。具体用哪种方式，取决于具体使用场景哪种做法更方便。