Vue循环渲染&key的原理

v-for

• 用于循环的数组里面的值可以是对象，也可以是普通元素

   <ul id="example-1">
       <!-- 循环结构-遍历数组  
    	item 是我们自己定义的一个名字  代表数组里面的每一项  
    	items对应的是 data中的数组-->
      <li v-for="item in items">
        {{ item.message }}
      </li> 
    
    </ul>
    <script>
     new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]，
       
      }
    })
    </script>

当 v-if 与 v-for 一起使用时

• v-for 具有比 v-if 更高的优先级。
• 若for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for

渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染

这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染

  <!--  循环结构-遍历对象
    		v 代表   对象的value
    		k  代表对象的 键 
    		i  代表索引	
    	---> 
         <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
    
    <script>
     new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]，
        obj: {
            uname: 'zhangsan',
            age: 13,
            gender: 'female'
        }
      }
    })
    </script>

key 起到的作用

• key来给每个节点做一个唯一标识
• key的作用主要是为了高效的更新虚拟DOM
• 解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值

key背后的原理

要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。

vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

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

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

因此，当页面的数据发生变化时，Diff算法只会比较同一层级的节点：
1. 如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。
2. 如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。————问题就此产生了

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时 ，如果在中间插入元素，则在此位置之后的所有节点的属性全都要更新，效率太低。
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。所以我们需要使用key来给每个节点做一个唯一标识，确保它在特定索引下显示已被渲染过的每个元素，这样的话Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。