一、delete和Vue.delete刪除陣列

delete

• 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
• 介面不會改變

this.a=[1,2,3,4]

delete this.a[1]
console.log(this.a)
//輸出：(4)[1, empty, 3, 4, __ob__: Observer]

Vue.delete

• this.$delete()，直接刪除了陣列，改變了陣列的鍵值。

• 響應式，介面改變

this.b=[1,2,3,4]

this.$delete(this.b,0)
//Vue.delete(this.b,0)
console.log(this.b)
//輸出：(4)[2, 3, 4, __ob__: Observer]
 

二、delete和Vue.delete刪除物件

delete

• 直接刪除鍵值
• 介面不會改變

this.c={name:'hhh',age:18}

delete this.c.age;
console.log(this.c);
//輸出：{name: "hhh"}

Vue.delete

• this.$delete()，直接刪除了鍵值。

• 響應式，介面改變

this.d={name:'hhh',age:18}

this.$delete(this.d,'age');
console.log(this.d);
//輸出：{name: "hhh"}

三、.屬性名和Vue.set新增元素

.屬性名

• 介面不會改變

this.c={name:'hhh',age:18}
this.c.height=188;//頁面不會改變
console.log(this.c);
//輸出：{name:'hhh',age:18,height:188}
//發現一個小問題：.和delete，如果當前操作或操作後有個響應式一起，介面也會改變，如this.$delete或this.$set

Vue.set

• this.$set()

• 響應式，介面改變

this.d={name:'hhh',age:18}
this.$set(this.d,'height',178)
console.log(this.d);
//輸出：{name:'hhh',age:18,height:178}
 

四、響應式新增元素

• Vue.set，響應式新增，介面會發生變化
• 用新物件給舊物件復值。新物件=Object.assign({},舊物件,新增物件)；

 this.info={name:'hhh',age:18}
//新增新
 this.info=Object.assign({},this.info,{address:'福州'})

作者：黃哈哈。

原文連結：https://www.cnblogs.com/jiajia-hjj/p/15393107.html

本部落格大多為學習筆記或讀書筆記，本文如對您有幫助，還請多推薦下此文，如有錯誤歡迎指正。