vue v-if和key值的注意的地方
v-if的使用
v-if 用来判断元素的显示与隐藏，
与v-show的相同和区别：
v-if和v-show 为true 都占据位置，为false都不占有位置
控制手段：v-if 通过删除和添加dom结构进行显示和隐藏，v-show通过css的display：none;
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，才不做操作，直到为真才渲染
key的使用
key用来标识元素的唯一性，主要是由于vue的diff算法尽量复用旧的节点问题
-
提高渲染性能：通过为每个节点提供唯一的标识符，Vue可以更高效地更新虚拟DOM。虚拟DOM的比较和更新过程会利用这个唯一标识符来快速定位和更新相应的节点，而不是逐个比较所有节点，从而减少不必要的DOM操作，提高渲染效率。
-
追踪元素身份：key属性帮助Vue追踪每个节点的身份，特别是在列表渲染中。通过为每个元素分配一个唯一的key，Vue能够在数据变化时准确地追踪到哪个元素发生了变化，从而更新相应的节点，而不是重新渲染整个列表。
-
优化列表渲染：在使用v-for指令渲染列表时，每个列表项都应该拥有唯一的key。这样Vue就能准确地追踪每个节点的身份，从而进行高效的DOM更新。如果没有key，Vue可能会复用错误的节点，导致意外的行为。
-
保持组件状态：在表单输入或其他需要保持状态的情况下，key属性可以帮助Vue保持元素的状态不变。即使数据发生变化，表单的输入状态也能保留，避免了因重新渲染而丢失状态的问题。
-
避免潜在的错误：如果不为列表项指定唯一的key，Vue会默认使用索引作为key，这在列表项顺序会发生变化的情况下可能会导致渲染错误。因此，为列表项指定唯一且稳定的key是避免潜在错误的重要措施。
使用场景和最佳实践：
- 在使用v-for循环渲染列表时，应该为每个列表项提供一个唯一的key，通常可以使用数据项的唯一标识符（如ID）作为key。
- 在动态组件或条件渲染中，key也可以帮助Vue区分不同的子组件，确保正确的更新和渲染。
通过正确使用key属性，可以显著提高Vue应用的性能，并确保在动态更新和重新渲染时的正确性。
v-if和key搭配使用
例如
<template v-if="isPrev">
<el-button type="primary" size="small" key="asdf" :disabled="disabled">按我</el-button>
</template>
<template v-else>
<el-button type="primary" size="small" :disabled="disabled">保存</el-button>
</template>