vue v-for渲染的key问题
- 基础用法
- 遍历数组(最多)
<li v-for ="(item,i) in arr" :key="i"> {{item}} </li>
- 遍历对象
<li v-for ="(value,key) in obj" :key="key"> {{value}} </li>
- 遍历字符串
<li v-for ="(char,i) in string" :key="i"> {{char}} </li>
- 遍历次数
<li v-for ="(number,i) in 5" :key="i"> {{number}} </li>
- key的原理
根据key值对应,相同节点复用,不同节点重新生成真实DOM节点;
例如:当新虚拟dom 根据key=0,找到初始dom中key值相等的虚拟dom;然后发现新dom与旧dom文档节点值不一样,不能复用;但input节点相等,所有可以复用;就直接调用已生成的真实DOM节点,但是真实DOM节点已经存在了数值,所有就不对应了
若不写key,默认index