vue 更新数组（Vue中splice()方法：实现对数组进行增删改的操作）

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

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

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

index:数组开始下标       

 len: 替换/删除的长度       

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

一

 


 


 


 


 

、删除：

index表示要删除的数组下标
 
  
 
  
 
  
 
  
 
  
， len长度为1（len设置1









，如果为0  
  
  
  
  
 ，则数组不变） 
  
  
  
  
 ，item为空表示执行删除操作

  <template> <div id="demo"> <h2>v-for 遍历数组</h2> <ul> <li v-for="(item, index) in persons" :key="index"> 序号：{{index}} 名字：{{item.name}} 年龄：{{item.age}} <button @click="del(index)">删除</button> </li> </ul> </div> </template> <script> export default { data(){ return{ persons: [ {name: Tom, age:18}, {name: Jack, age:17}, {name: Bob, age:19}, {name: Mary, age:16} ] } }, methods:{ //删除（注意：删除的方法名不能用delete


 


 


 


 


 
，因为delete是系统关键字） del(index) { this.persons.splice(index, 1) } } } </script> <style> </style>

二 
 
 
 
 
、替换（修改）：

相当于是先删除 
 
 
 
 
，再添加

<div id="demo"> <h2>测试: v-for 遍历数组</h2> <ul> <li v-for="(item, index) in persons" :key="index"> 序号：{{index}} 名字：{{item.name}} 年龄：{{item.age}} <button @click="update(index, {name:张三, age: 16})">更新</button> </li> </ul> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: #demo, data: { persons: [ {name: Tom, age:18}, {name: Jack, age:17}, {name: Bob, age:19}, {name: Mary, age:16} ] }, methods: { //修改 update(index, item) { this.persons.splice(index, 1, item) } } }) </script>

三 
   
   
   
   
   、添加：

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

<div id="demo"> <h2>测试: v-for 遍历数组</h2> <ul> <li v-for="(item, index) in persons" :key="index"> 序号：{{index}} 名字：{{item.name}} 年龄：{{item.age}} </li> </ul> <button @click="add({name: 李四, age: 18})">添加</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: #demo, data: { persons: [ {name: Tom, age:18}, {name: Jack, age:17}, {name: Bob, age:19}, {name: Mary, age:16} ] }, methods: { //添加 add (item) { this.persons.splice(0, 0, item) } } }) </script>

附加知识点：

在v-for遍历中
 

 

 

 

 
，都需要声明：key           ，那么:key的作用是什么呢？

答：vue和react都实现了一套虚拟DOM
 

 
 

 
 

 
 

 
 

 
，使我们可以不直接操作DOM元素









，只操作数据便可以重新渲染页面           。而隐藏在背后的原理便是其高效的Diff算法
 
  
 
  
 
  
 
  
 
  
。vue和react的虚拟DOM的Diff算法大致相同                ，其核心是基于两个简单的假设：

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









。

假设2
 

 

 

 

 

、 同一层级的一组节点














，他们可以通过唯一的id进行区分  
  
  
  
  
 。

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