vue.js實戰——splice使用

Vue在檢測到數組變化時，並不是直接重新渲染整個列表，而是最大化地復用DOM元素。替換的數組中含有相同元素的項不會被重新渲染，因此可以大膽地用新數組來替換就數組，不用擔心性能問題。

需要注意的是，以下變動的數組中，Vue是不能檢測到的，也不會觸發視圖更新：

　　1、通過索引直接設置項，比如app.books[3]={……}

　　2、修改數組長度，比如app.books.length=1.

 

解決第一個問題可以用兩種方法實現同樣的效果，第一種是使用Vue內置的set方法：

Vue.set(app.books, 3, {
    name:'<<CSS揭秘>>',
    author:'[希] Lea Verou'
})

如果是在webpack中使用組件化的方式（進階篇中將介紹），默認是沒有導入Vue的，這時可以使用$set，例如：

this.$set(app.books,3,{
    name:'<<CSS揭秘>>',
    author:'[希] Lea Verou'
});

//這里的this指向的就是當前組件實例，即app.在非webpack模式下也可以使用$set方法，例如：　　app.$set(……)

另一種方法：　　

app.books.splice(3,    1,    {
    name:'<<CSS揭秘>>',
    author:'[希] Lea Verou'
})

第二個問題也可以直接用splice來解決：

app.books.splice(1);

https://blog.csdn.net/xiha_zhu/article/details/80449339

Vue中splice的使用：

　　splice(　index,　len,　[item]) 用來刪除/替換/添加數組內某一個或者幾個值（該方法會改變原始數組）。

　　　　參數：index：數組開始下標

　　　　　　　len：替換/刪除的長度

　　　　　　　item：替換的值，刪除操作的話item為空

　　刪除：

　　　　//刪除起始下標為1，長度為1的一個值（len設置1，如果為0，則數組不變）

var arr=['a','b','c','d'];
arr.splice(1,1);
console.log(arr)//['a','c','d']

　　　　//刪除起始下標為1，長度為2的一個值（len設置2）

var arr=['a','b','c','d'];
arr.splice(1,2);
console.log(arr)//['a','d']

　　替換：

　　　　//替換起始下標為1，長度為1的一個值為“ttt”，len設置的1　

var arr=['a','b','c','d'];
arr.splice(1,1,'ttt');
console.log(arr)//['a','ttt','c','d']

　　　　//替換起始下標為1，長度為2的兩個值為‘ttt’

var arr=['a','b','c','d'];
arr.splice(1,2,'ttt');
console.log(arr)//['a','ttt','d']

　　添加：

　　　　//在下標為1處添加一項'ttt'

var arr=['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr)//['a','ttt','b','c','d']