v-for复习

 在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染。
 这个时候我们可以使用 v-for 来完成；
 v-for 类似于 JavaScript 的 for 循环，可以用于遍历一组数据；

 

1.v-for 基本使用

 v-for 的基本格式是 "item in 数组 " ：
 数组通常是来自 data 或者 prop ，也可以是其他方式；
 item 是我们给每项元素起的一个别名，这个别名可以自定来定义；
 我们知道，在遍历一个数组的时候会经常需要拿到数组的索引：
 如果我们需要索引，可以使用格式： "(item, index) in 数组 " ；
 注意上面的顺序：数组元素项 item 是在前面的，索引项 index 是在后面的；

  
  
  
  
  


 
  

    
    
电影列表
    

      
{{ movie }}
    
 
    
    

      
{{index + 1}} - {{ movie }}
    
 
    
    
商品列表
    

      
商品: {{item.name}}
      价格: {{item.price}}
      
秒杀: {{item.desc}}
    
  
   
  
  

2.v-for 支持的类型

 v-for 也支持遍历对象，并且支持有一二三个参数：
 一个参数： "value in object";
 二个参数： "(value, key) in object";
 三个参数： "(value, key, index) in object";
 v-for 同时也支持数字的遍历：
 每一个 item 都是一个数字；
 v-for 也可以遍历其他可迭代对象 (Iterable),比如对象

  
  
  
  


 
  

    
 
    
    

      
{{value}}-{{key}}-{{index}}
    
 
    
    

      
{{item}}
    
 
    
    

      
{{item}}
    
  
   
  
  

3.数组更新检测

 Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。
 这些被包裹过的方法包括：
 push()
 pop()
 shift()
 unshift()
 splice()
 sort()
 reverse()
 替换数组的方法
 上面的方法会直接修改原来的数组；
 但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter() 、 concat() 和 slice() ；

  
  
  
  


 
  

    

      
{{ item }}
    
    修改数组
  
   
  
  

4.v-for 中的 key 是什么作用？

 在使用 v-for 进行列表渲染时，我们通常会给元素或者组件绑定一个 key 属性。
 这个 key 属性有什么作用呢？我们先来看一下官方的解释：
 key 属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes ；
 如果不使用 key ， Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改 / 复用相同类型元素的算法；
 而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 / 销毁 key 不存在的元素；

 官方的解释对于初学者来说并不好理解，比如下面的问题：
 什么是新旧 nodes ，什么是 VNode ？
 没有 key 的时候，如何尝试修改和复用的？
 有 key 的时候，如何基于 key 重新排列的？

 Vue 事实上会对于有 key 和没有 key 会调用两个不同的方法；
 有 key ，那么就使用 patchKeyedChildren 方法；
 没有 key ，那么久使用 patchUnkeyedChildren 方法；

 

没有 key 的过程如下

 上面的 diff 算法效率并不高：
 c 和 d 来说它们事实上并不需要有任何的改动；
 但是因为我们的 c 被 f 所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增；

有 key 执行操作（源码）

 

 结论,调用数组进行更新时最好使用key,这样可以提高更新效率