假设有以下代码片段
new Vue({
data:{
obj:{
a:0
}
},
template:`
<div>
{{obj.b}}
<button @click="setB">set b</button>
</div>
`,
methods:{
setB(){
this.obj.b = 1
}
}
}).$mount("#app")
以上代码Vue并不会报错,因为Vue只会检查第一层属性即obj
点击setB之后,页面并不会出现1,因为Vue根本无法监听到一开始不存在与obj中的b属性
因此可以把 setB()中的语句改成
Vue.set(this.obj,'b',1)
或者
this.$set(this.obj,'b',1)
这两句话做了几件事:
1.新增key
2.自动创建代理和监听(如果没有创建)
3.触发UI更新