Vue中key的作用

v-if和v-for一起使用时的优先级

• 在vue2中当v-if和v-for同时使用时，v-for的优先级更高
• 在vue3中当v-if和v-for同时使用时，v-if的优先级更高

解决方式：①利用computed ②把v-if放在上一个节点

vue中key的作用

key 的作用主要是①标识一个独立的元素，②为了高效的更新虚拟DOM

• 在v-if中使用key。vue为了高效的渲染，通常会复用已有的元素，因此当使用v-if来实现元素切换的时候，这个元素会被复用。如果是相同的input元素，那么切换后用户输入的值不会被清空，这样是不符合逻辑的。因此可以使用key来作为元素的唯一标识，该元素就不会被复用了。
• v-for中使用key。用v-for更新已渲染过的列表时，默认使用就地复用的策略。如果数据列表改变顺序，vue不会移动dom匹配数据列表的顺序，而是简单复用此处的数据。因此为每个列表项增加一个key值，便于vue跟踪元素的身份，从而实现高效的复用。此时的key是为了更高效的更新渲染虚拟dom。
• key 是为 Vue 中 vnode 的唯一标记，通过这个 key，diff 操作可以更准确、更快速

1. 更准确：因为带 key 就不是就地复用了，在 sameNode 函数a.key === b.key对比中可以避免就地复用的情况。所以会更加准确
2. 更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快

为什么不建议用index作为key?

使用index 作为 key和没写基本上没区别，因为不管数组的顺序怎么颠倒，index 都是 0, 1, 2...这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。