Vue.js中splice()方法实现对数组进行增删改的操作

语法结构：splice(index,len,[item])

1、可以用来添加/删除/替换数组内某一个或者几个值

2、该方法会改变原始数组

index:数组开始下标       

 len: 替换/删除的长度       

item:替换的值，删除操作的话 item为空

一、删除：

index表示要删除的数组下标， len长度为1（len设置1，如果为0，则数组不变），item为空表示执行删除操作

  
v-for 遍历数组
  

    

	      序号：{{index}}
	      名字：{{item.name}}
	      年龄：{{item.age}}
     删除
    
  

二、替换（修改）：

相当于是先删除，再添加

  
测试: v-for 遍历数组
  

    

	      序号：{{index}}
	      名字：{{item.name}}
	      年龄：{{item.age}}
     更新
    
  

三、添加：

index下标直接设置为0，len长度也设置为0，item传入要添加的对象

  
测试: v-for 遍历数组
  

    

	      序号：{{index}}
	      名字：{{item.name}}
	      年龄：{{item.age}}
    
  
  添加

附加知识点：

在v-for遍历中，都需要声明：key，那么:key的作用是什么呢？

答：vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

假设1、 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。

假设2、 同一层级的一组节点，他们可以通过唯一的id进行区分。

简单的说， :key的作用主要是为了高效的更新虚拟DOM