<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 lang="scss" scoped></style>
点击 button 会发现,obj.b 已经成功添加,但是视图并未刷新。这是因为在Vue实例创建时,obj.b并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局 api $set0
$set0方法相当于手动的去把obj.b处理成一个响应式的属性,此时视图也会跟着改变了.