给vue的data添加一个新属性时，页面不更新

<template>
    <p v-for="(value,key) in item" :key="key">
        {{ value }}
    </p>
    <button @click="addProperty">动态添加新属性</button>
</template>
<script>
    const app = new Vue({
    el:"#app",
       data:()=>{
           item:{
            oldProperty:"旧属性"
        }
    },
    methods:{
        addProperty(){
            this.items.newProperty = "新属性"  // 为items添加新属性
            console.log(this.items)  // 输出带有newProperty的items
        }
    }
})            
</script>

 因为vue2通过Object.defineProperty实现数据的响应式

const obj = {}
Object.defineProperty(obj, 'foo', {
        get() {
            console.log(`get foo:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log(`set foo:${newVal}`);
                val = newVal
            }
        }
    })
}

当访问foo属性或者设置foo值时都能够出发setter与getter，但是添加新属性时，却无法触发事件的拦截，原因是一开始obj的foo值属性被设置成了响应式数据，而bar是后面新增的属性，并没有通过object.definePropety

解决方案：

Vue.set();

Object.assign()

$forceUpdated 强制更新