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']