vue中怎样动态添加属性

<button @click="addObjB"></button>
data:{
    obj:{
        a:''
    }
}

methods:{
    addObjB(){
        this.$set(this.obj,'b',111)
    }
}

Vue数组、对象改变视图不更新：

第一种情况：

基本数据类型和对象：实例化的时候如果没有被加入到data中，那么它就不是响应式属性，这时要添加新的根级响应式属性，可以使用

this.$set(this.obj, key , value); //添加一个属性

this.obj=Object.assign({},this.obj,{a:1,b:2}); //添加多个属性，必须要创建一个新的对象，让它包含原对象的属性和新的属性

第二种情况：

数组（直接用索引值给数组某一项赋值；或者修改数组的长度）

var vm=new Vue({
    data:{
        list:['a','b','c']
    }
});
vm.list[1]='x'; //不是响应式的
vm.list.length=0; //不是响应式的

vm.$set(vm.list,1,'x') //响应式的
vm.list.splice(1,1,'x') //响应式的

splice（index,howmany,newValue1,newValue2）//

解决方法：

1、this.$set(obj,obj.b,value) （手动的去把obj.b处理成一个响应式的属性）

2、this.$forceUpdate() //强制刷新视图，适用于数据层次太多的情况

3、this.$nextTick(function(){ }); //回调函数会在dom更新完后就会调用

 

Vue3.0 Object.defineProperty=>Proxy

Proxy：对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）

优点：比 Object.defineProperty有更丰富的api，更灵活

缺点：兼容性没那么好。