Vue给对象动态添加，删除属性

逃离我推掉我的手 2022-08-29 00:24 362阅读 0赞

[https://www.cnblogs.com/annie211/p/12654177.html][https_www.cnblogs.com_annie211_p_12654177.html]

<button @click="addObjB"></button>
    <button @click="deleteObjB"></button>
    data:{
        obj:{
            a:''
        }
    }
    
    methods:{
        // 给对象添加一个属性
        addObjB(){
            this.$set(this.obj,'b',111)
        },
        // 给对象删除一个属性
        deleteObjB(){
            this.$delete(this.obj,'a')
        }
    }

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

缺点：兼容性没那么好。

[https_www.cnblogs.com_annie211_p_12654177.html]: https://www.cnblogs.com/annie211/p/12654177.html