问题

v-if 与 v-show的区别？

---

v-if 和 v-show 都是 Vue.js 中用于控制元素显示与隐藏的指令，但它们在实现方式、性能表现和使用场景上存在明显区别。

1. 实现方式

• v-if：是一种条件渲染指令，它会根据表达式的值的真假来动态地添加或移除 DOM 元素。当表达式的值为 true 时，元素会被插入到 DOM 中；当表达式的值为 false 时，元素会从 DOM 中移除。
• v-show：则是通过修改元素的 display CSS 属性来控制元素的显示与隐藏。无论表达式的值是 true 还是 false，元素始终会存在于 DOM 中，只是当表达式的值为 false 时，元素的 display 属性会被设置为 none，使其在页面上不可见。

2. 性能表现

• v-if：由于涉及到 DOM 元素的添加和移除操作，这会带来较高的性能开销，尤其是在频繁切换显示状态时，会不断地触发 DOM 的重排和重绘，影响页面性能。不过，如果在初始渲染时条件为 false，那么对应的元素不会被渲染，这在某些情况下可以节省初始渲染的时间和资源。
• v-show：只是修改元素的 display 属性，不会触发 DOM 的添加和移除操作，因此切换显示状态的性能开销相对较低。但无论初始条件如何，元素都会被渲染到 DOM 中，这可能会增加初始渲染的时间和资源消耗。

3. 使用场景

• v-if：适用于在运行时很少改变条件，不需要频繁切换显示状态的场景。例如，根据用户的权限来决定是否显示某个功能模块，这种情况下权限信息通常在用户登录时就确定了，不会频繁改变，使用 v-if 可以避免不必要的 DOM 元素存在。
• v-show：适用于需要频繁切换显示状态的场景。例如，在一个表单中，根据用户的选择显示不同的输入框，这种情况下显示状态会频繁变化，使用 v-show 可以提高性能。