Vue v-for渲染的key问题

vue v-for渲染的key问题

1. 基础用法

1. 遍历数组(最多)
   <li v-for ="(item,i) in arr" :key="i"> {{item}} </li>
2. 遍历对象
   <li v-for ="(value,key) in obj" :key="key"> {{value}} </li>
3. 遍历字符串
   <li v-for ="(char,i) in string" :key="i"> {{char}} </li>
4. 遍历次数
   <li v-for ="(number,i) in 5" :key="i"> {{number}} </li>

2. key的原理
   
   根据key值对应，相同节点复用，不同节点重新生成真实DOM节点；
   例如：当新虚拟dom 根据key=0，找到初始dom中key值相等的虚拟dom；然后发现新dom与旧dom文档节点值不一样，不能复用；但input节点相等，所有可以复用；就直接调用已生成的真实DOM节点，但是真实DOM节点已经存在了数值，所有就不对应了
   若不写key，默认index