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

缺點：兼容性沒那么好。