v-show和v-if区别

在Vue的内部指令中,v-show与v-if的区别,总结如下:

在Vue中,我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令(条件渲染)。这里所说的指令就是directive,指特殊的带有前缀v-的命令,指令的值限定为绑定表达式,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

v-show

除了v-if之外,Vue还提供v-show也可以控制元素的渲染。v-show和v-if功能有点相似,其中v-if依赖于控制DOM节点,而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时,对应DOM元素的display的值为block之类的,反之为false时,display的值为none。也就是用户看不到元素的显示,但其DOM元素还是存在的。

v-if和v-show都能控制DOM元素的显示和隐藏,但是在切换v-if模块时,Vue有一个局部编译/卸载过程,因为v-if中的模板可能包括数据绑定或者子组件,v-if是真是的条件渲染,它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。


v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
v-if 有更高的切换开销,v-show有更高的初始渲染开销。如果需要频繁切换,则使用v-show 较好,如果运行条件不太可能改变,使用v-if较好。

这两个都是Vue的内部指令,而且都是用来控制元素的渲染。只不过,v-if判断是否加载,可以减轻服务器的压力,在需要时加载;v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅。虽然这两都都能很好的控制元素的渲染,但实际使用的时候,更应该根据自己的场景来判断使用哪一个指令。

————————————————
版权声明:本文为CSDN博主「歪歪100」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_41646716/article/details/80090484

原文地址:https://www.cnblogs.com/renranwj/p/12284187.html