Vue的data{obj:{...}}如何新增key

Object.defineProperty的问题

Object.defineProperty(obj,"n",{...}) 必须要有一个"n"，才能监听或代理obj.n。如果前端开发者没有给出n，会出现bug。因为Vue没法监听一开始就不存在的obj.n。

解决方法

Vue.set或者this.$set（Vue的api）

用法

this.$set(this.obj,key,value)//传给Object.defineProperty，通知Vue，我要set 'this.obj',set一个新的key

代码示例

new Vue({
    data:{
        obj:{
            a:0//obj.a会被Vue监听代理
        }
    },
   template:`
   <div>
      {{obj.b}}
      <button @click = "setB">set b</button>
   </div>
   ` ,
   methods:{
       setB(){
           //this.obj.b = 1//data中b没有给出，点击button页面不会显示1
           Vue.set(this.obj, "b", 1)
           this.$set(this.obj, "b", 1)
       }//加$是防止与data中的set重名，如果data中有set的话。
       console.log(Vue.set === this.$set)//Vue.set和this.$set等价
   }
})

Vue.set或者this.$set的作用

• 新增key
• 自动创建代理和监听
• 触发UI更新