Vue 改變陣列觸發檢視更新

以下方法呼叫會改變原始陣列

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

push()
push() 方法可向陣列的末尾新增一個或多個元素，並返回新的長度。

example1.items.push({ message: 'Baz' })

pop()
pop() 方法用於刪除最後一個元素，把陣列長度減 1，並且返回它刪除的元素的值。

shift()
shift() 方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值。

unshift()
unshift() 方法可向陣列的開頭新增一個或更多元素，並返回新的長度。

splice()
splice() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。 該方法會改變原始陣列。

sort()
sort() 方法用於對陣列的元素進行排序。

reverse()
reverse() 方法用於顛倒陣列中元素的順序。

set()
Vue.set() 響應式新增與修改資料

呼叫方法：Vue.set( target, key, value )
target：要更改的資料來源(可以是物件或者陣列)
key：要更改的具體資料
value ：重新賦的值

Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
// Vue.set()在methods中也可以寫成this.$set()

 

以下方法呼叫不會改變原始陣列 filter(), consat(), slice() 他們返回的是一個新陣列，使用這些方法時，可以用新陣列來替換原始陣列