示例：
<template>
<div>
<ul>
<li v-for="value in obj" :key="value">
{{value}}
</li>
</ul>
<button @click="addObjB">添加obj.b</button>
</div>
</template>
<script>
export default{
data () {
return {
obj: {
a: 'obj.a'
}
}
},
methods: {
addObjB () {
this.obj.b = 'obj.b'
console.log(this.obj)
}
}
}
</script>
<style></style>
點擊button會發(fā)現(xiàn)译荞， obj.b 已經(jīng)成功添加瓤的，但是視圖并未刷新：
QQ截圖20190303154007.png
原因在于在Vue實例創(chuàng)建時， obj.b 并未聲明吞歼，因此就沒有被Vue轉(zhuǎn)換為響應式的屬性圈膏，自然就不會觸發(fā)視圖的更新，這時就需要使用Vue的全局api—— $set()：
addObjB () {
// this.obj.b = 'obj.b'
this.$set(this.obj, 'b', 'obj.b')
console.log(this.obj)
}
$set() 方法相當于手動的去把 obj.b 處理成一個響應式的屬性篙骡，此時視圖也會跟著改變了：
QQ截圖20190303154616.png
