8-对象变更检测Vue不能检测对象属性的添加和删除，比如说一个已经创建好的对象，如果你想通过触发事件并且直接在事件函数中

Vue不能检测对象属性的添加和删除，比如说一个已经创建好的对象，如果你想通过触发事件并且直接在事件函数中通过this.对象.新属性 = 属性值;给该对象添加新的属性，这样是行不通的。当然考虑到这种问题Vue也为我们提供了解决方法通过Vue.set(object,key,value)添加响应式属性。

同时在这里再结合前面两次写博客时遇到的这种分别通过Vue和this调用Vue自身的方法，发现了就是直接通过Vue调用Vue自身的方法时方法名前不加$符，而通过this调用Vue自身的方法时需在方法名前加$符 。然后这两种方式在下面的代码中会体现出来。

<body>
    <div id="app">
        <h3>{{ user.name }},{{user.age}},{{user.sex}}</h3>
        <button @click='handleAdd'>添加属性</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //Vue不能检测对象属性的添加和删除
        new Vue({
            el: '#app',
            data: {
                user: {}
            },
            created() {
                //模拟请求数据
                setTimeout(() => {
                    this.user = {
                        name: 'tom'
                    }
                }, 1000);
                //通过Vue.set(object,key,value)添加响应式属性
                /* setTimeout(() => {
                    Vue.set(this.user, 'age', 18);
                }, 2000); */
            },
            methods: {
                handleAdd() {
                    //this.user.age = 18;  不可行

                    //通过this.$set(object,key,value)添加响应式属性
                    this.$set(this.user, 'age', 20);
                    this.$set(this.user, 'sex', '男');

                    //添加多个响应式属性
                    /* this.user = Object.assign({}, this.user, {
                        age: 20,
                        sex: '男'
                    }) */
                }
            },
        })
    </script>
</body>

当需要添加多条属性时，我们可以通过多次调用this.$set(object,key,value)进行添加，同时也可以通过es6中的Object.assign(target, ...sources)一次性添加多条属性。

删除属性可以通过Vue.delete( target, propertyName/index )，删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它。