v-show与v-if

阅读目录

1. v-show与v-if的异同
   • 相同点
   • 不同点
   • 应用场景
2. 为什么不建议v-if与v-for一起使用？

 

---

回到顶部

v-show与v-if的异同

相同点

　　v-if与v-show都能根据条件来控制元素在页面中是否显示，当条件为false是都不会占据页面位置。

 

不同点

v-show是通过修改CSS属性来控制元素的显示和隐藏的，当需要隐藏时将元素的CSS样式设置为display:none；当需要显示时则移除该属性。因此，不管元素需要显示还是隐藏，都需要先创建这个元素。

v-if是通过添加或删除元素来控制元素的显示和隐藏的，它是真正的条件渲染，只有条件为真时才渲染。另外，在切换过程中会触发组件的生命周期，确保事件监听器与子组件在切换过程中适当地被重建和销毁。

 

应用场景

　　由于v-if相比于v-show来说开销更大，因此对于频繁切换的组件或元素，使用v-show更加合适。

 

回到顶部

为什么不建议v-if与v-for一起使用？

　　由于v-for的优先级比v-if更高，因此在同一个元素上同时使用v-if与v-for时，会导致每次渲染都会先循环再进行条件判断，造成性能方面的浪费。