解析vue中push()和splice()的使用

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

注意：

1. 新元素將新增在陣列的末尾。

2.此方法改變陣列的長度。

陣列中新增新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits); 
//["Banana", "Orange", "Apple", "Mango","Kiwi"];

splice() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案

注意：這種方法會改變原始陣列

語法：

array.splice(index,len,item1,.....,itemX)

• index: 必需，陣列開始下標 （必須是數字）
• len: 替換/刪除的長度（必須是數字，但可以是 “0”；如果未規定此引數，則刪除從 index 開始到原陣列結尾的所有元素。）
• item: 替換的值，刪除操作的話 item為空

說明：

如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的陣列。

刪除

//刪除起始下標為1，長度為1的一個值(len設定1，如果為0，則陣列不變)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1);
console.log(fruits); 
//["Banana", "Apple", "Mango"];

//刪除起始下標為1，長度為2的一個值(len設定2)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2);
console.log(fruits); 
//["Banana", "Mango"];

//替換起始下標為1，長度為1的一個值為‘ttt’，len設定的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1,'ttt');
console.log(fruits); 
//["Banana", 'ttt',"Apple", "Mango"];
//替換起始下標為1，長度為2的兩個值為‘ttt’，len設定的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2,'ttt');
console.log(fruits); 
//["Banana", 'ttt', "Mango"];

//在下標為1處新增一項’ttt’

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,0,'ttt');
console.log(fruits); 
//["Banana", 'ttt', "Orange", "Apple", "Mango"];

向陣列中間新增元素

var items = ["1", "2", "3", "4"];
items.splice(items.length / 2, 0, "hello");
console.log(items);
// ["1", "2", "hello", "3", "4"]

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的唯一 id。