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,更灵活

缺点:兼容性没那么好。

posted @ 2020-04-07 16:34  2350305682  阅读(16159)  评论(0编辑  收藏  举报