v-show 与 v-if 有什么区别?

21 阅读1分钟

v-show 和 v-if 都是 Vue.js 提供用于动态渲染页面的指令,但它们在实现和运行时机上有所不同。

v-show

不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 的 “display” 属性进行切换。它只是简单地隐藏或显示元素,实现 CSS display 属性的效果,但不改变元素的 dom 结构。当条件为 false 时,元素还会在 DOM 中保留,只是样式上不再可见而已。

v-if

是在渲染页面时动态地插入或移除元素,只有当条件为 true 时才会插入元素,条件为 false 时会移除元素,从而减少了不必要的操作和处理。它可以在属性和内容方面处理更复杂的逻辑和操作,但会影响 DOM 操作性能,适用于需要频繁切换的情况。

也是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。

总结

所以,v-show 更适合在需要频繁切换但不影响性能的情况下使用,而 v-if 更适合在需要条件渲染的情况下使用。