vue3中v-for的key源码解析

v-for和v-if不能一同使用

例如：我们向通过某一个属性，来动态的决定该元素是否渲染时，我们要使用v-if进行判断，但是v-if的优先级高于v-for，不能实现我们想要的效果。

我们可以通过template来解决这个问题。

 <ul>
     <template v-for="item in arr" :key="item.name">
         <li v-if="item.isshow">{{item.name}}</li>
     </template>
 </ul>
 ​
 ​
  arr: [
     {name: "a", isshow: true},
     {name: "b", isshow: false},
     {name: "c", isshow: true},
     {name: "d", isshow: true},
 ],

key关键字的深度解析

举例：有a,b,c,d一个数组，我们对它进行v-for遍历渲染，然后我们在b后面插入一个新的值f。数组变为a,b,f,c,d；通过ul列表进行渲染，分析有key和无key的情况。

vue源码中通过判断是否有key，来执行不同的对比函数。

无key

没有key时，会执行patchUnkeyedChildren方法。

有key

有key时，会执行patchkeyedChildren方法。

总结：添加key以后，vue会通过key来执行diff算法匹配新旧结点，计算出结点最大的复用，效率更高。