【八股文面试题】v-if和v-show的区别

目录

一、v-if和v-show的区别

二、vue2中v-for的权重高，vue3中v-if的权重高

三、为什么避免v-if和v-for一起用：

---

一、v-if和v-show的区别

①v-if:根据条件判断元素是否渲染，当判断条件从false变成true时，会进行元素的销毁和创建，对应的组件会执行他的生命周期导致开销大

②v-show只是通过修改CSS样式来控制元素的显示和隐藏，不会对元素进行销毁和重新创建导致开销小

③综上所述，如果需要频繁切换元素的显示和隐藏，并且初始渲染时元素较可能是显示的，可以考虑使用v-show。而如果需要条件判断来控制是否渲染元素，并且初始渲染时元素较可能是隐藏的，可以选择使用v-if。

二、vue2中v-for的权重高，vue3中v-if的权重高

三、为什么避免v-if和v-for一起用：

在Vue.js中，`v-if`和`v-for`是两个常用的指令，分别用于条件渲染和循环渲染，但通常不建议将它们同时用在同一个元素上，因为这可能会导致性能问题和不必要的复杂性。

四、为什么不能用index作为v-for的key值

状态不稳定：在Vue的开发中，数据是动态变化的，当数据发生变化时，新的元素可能被添加到数组的开头、中间或末尾等位置，这样原本的index值就会发生改变，导致key与实际内容不匹配，可能会出现渲染错误或性能下降的问题。

列表重新排序时可能引发错误：当列表中的元素需要重新排序时，如果我们使用index作为key值，Vue会认为只是简单的更新了元素的位置，而不是重新创建新元素，这可能会导致列表顺序混乱或出现奇怪的BUG。

对可访问性的影响：如果使用index作为key值，可能会导致不利于屏幕阅读器和键盘导航器的访问，因为这些助力技术可能依赖于key值来确定元素的唯一性。

---