<body>
    <div id="app">
        <p v-for="(value,key) in item" :key="key">
            {{value}}
        </p>
        <button @click="addProperty">動態(tài)添加新屬性</button>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            item:{
                oldProperty:"舊屬性"
            }
        },
        methods: {
            addProperty(){
                this.item.newProperty = "新屬性";
                console.log(this.item);
            }
        },
    })
</script>

效果：點擊按鈕后，輸出的結(jié)果中有新添加的新屬性，但是頁面沒有顯示新屬性。

二、原理分析

vue2使用Object.defineProperty實現(xiàn)數(shù)據(jù)響應(yīng)式；

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
            }
        }
    })
}

當(dāng)訪問foo屬性，或者設(shè)置foo值的時候都能觸發(fā)setter與getter；
但是為obj添加新屬性的時候，卻無法觸發(fā)事件屬性的攔截

bj.bar = '新屬性'

原因是一開始o(jì)bj的foo屬性被設(shè)成了響應(yīng)式數(shù)據(jù)，而bar是后面新增的屬性，并沒有通過Object.defineProperty設(shè)置成響應(yīng)式數(shù)據(jù)

三、解決方案

有三種解決方案：

Vue.set()
Object.assign()
$forcecUpdated()

常用的就是Vue.set()，語法為：Vue.set( target, propertyName/index, value )

<script>
    new Vue({
        el:'#app',
        data:{
            item:{
                oldProperty:"舊屬性"
            }
        },
        methods: {
            addProperty(){
                Vue.set(this.item,"newProperty","新屬性")
                console.log(this.item);
            }
        },
    })
</script>