Vue2.0中动态给data添加一个新的属性时会发生什么？怎样解决？

一. 问题：vue开发中动态给data添加一个新的属性会遇到数据更新，但是页面没有更新的情况。

例如这段代码：

<p v-for="(value,key) in item" :key="key">
    {{ value }}
</p>
<button @click="addProperty">动态添加新属性</button>

const app = new Vue({
    el:"#app",
   	data:()=>{
       	item:{
            oldProperty:"旧属性"
        }
    },
    methods:{
        addProperty(){
            this.items.newProperty = "新属性"  // 为items添加新属性
            console.log(this.items)  // 输出带有newProperty的items
        }
    }
})

点击按钮，发现数据虽然更新了（console打印出了新属性），但页面并没有更新

二. 原因

由于vue2是用Object.defineProperty实现数据响应式

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

当我们设置a值的时候都能够触发setter与getter, 但是我们为obj添加新属性的时候，却无法触发。

原因是一开始obj的a属性被设成了响应式数据，而后面新增的属性，并没有通过Object.defineProperty设置成响应式数据

三. 解决方案

1. Vue.set()

        通过Vue.set向响应式对象中添加一个property，并确保这个新 property同样是响应式的，且触发视图更新

2. Object.assign()

       创建一个新的对象， 使用Object.assign()合并原对象和混入对象的属性

3. $forcecUpdated()

        $forceUpdate强制更新，可以让Vue 实例重新渲染