vue中在声明的对象或数组添加的数据为什么不是响应式的？

1.我们在使用vue中可能需要在方法中动态添加一些属性，但是发现数据修改之后，页面并没有响应这些变化。

发生这种情况是因为vue中data数据会经过Object.defineProperty（）进行数据拦截，而在js中Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

2.如何解决这个问题？

1.可以使用 Vue.set(object, key, value) 向嵌套对象添加响应式属性。

    <template> 
        <p>{{item.oldProperty}}</p> 
        <p>{{item.newProperty}}</p> 
        <button @click="dynamicClick()">新增属性</button> 
    </template>

    <script>
        data() { 
            return { items:{ oldProperty:"旧属性"} }
        }, 
        methods: { 
            dynamicClick:function(){ this.$set(this.items,"newProperty","新属性") 
        }, 
        } 
    </script>

2.使用 Object.assign() 合并原对象

<template> 
    <p>{{item.oldProperty}}</p>
    <p>{{item.newProperty}}</p>
    <button @click="dynamicClick()">新增属性</button>
</template> 
<script> 
    data() {
        return { items:{ oldProperty:"旧属性"} }
    },
    methods: { 
        dynamicClick:function(){ this.items = Object.assign({}, this.items, {newProperty: "新属性"})
    } 
    } 
</script>

3.使用$forceUpdate

$forceUpdate 会迫使 Vue 实例重新渲染，也就是强制更新，不建议使用