前端-打卡每日面试题（2024.1.24）

v-if 和 v-show的区别

1. 初始化时的渲染：

   • v-if：只有在条件为真时才会渲染元素及其子组件。如果条件为假，元素及其子组件将不会被渲染到 DOM 中。

   • v-show：无论条件是真还是假，元素总是会被渲染到 DOM 中，只是在条件为假时，通过 CSS 的 display: none; 来隐藏元素。

2. 性能：

   • v-if：在条件切换时，会销毁和重建元素及其子组件，可能会有一些性能开销。

   • v-show：只是简单地切换元素的可见性，不会销毁和重建元素，因此在切换频繁的情况下，v-show 的性能优于 v-if。

3. 适用场景：

   • v-if：适用于在运行时条件不经常改变的情况，或者在条件切换时希望释放组件的资源。

   • v-show：适用于需要频繁切换条件，但组件的初始化成本比较高的情况。

4. 条件判断：

   • v-if：适用于任何类型的条件。

   • v-show：只能接受布尔值，不支持通过非布尔值进行判断。

5. 编译过程：

   • v-if：在编译时，条件为假的部分会被忽略，不会生成对应的 DOM 结构。

   • v-show：在编译时，无论条件真假，都会生成对应的 DOM 结构，通过 CSS 控制可见性。

总的来说，v-if 适用于在运行时条件不经常改变的情况，v-if安全性高，而 v-show 则适用于需要频繁切换条件的情况。在选择使用哪个指令时，可以根据具体场景和性能需求进行考虑。