vue的data的一个bug

57 阅读1分钟

假设有以下代码片段

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更新