vue中v-if和v-show的区别详解

v-if和v-show都可以用来控制元素的显示和隐藏,但是其实这两者是有区别的。

v-if和v-show在控制元素显示的时候基本上是没什么区别的,区别主要在于控制元素隐藏的时候。v-if在控制元素隐藏的时候是直接将dom元素删除,而v-show则是使用css中的display:none去控制元素隐藏。下面给个场景详细讲解一下v-if和v-show的使用：

如上图所示,当我点击销售订单要显示销售订单的页面,当我点击自购订单要显示自购订单的页面，这个时候由于我们在使用的时候会对这两个订单进行频繁的切换,因此使用v-show的最合适的。

如果使用v-if会发现,当我们重新进入销售/自购订单页面的时候,我原先操作的东西都会被初始化。正常情况下是我点击了待发货之后点击销售订单再切回来自购订单,它还是显示待发货,如果使用v-if会重新渲染dom元素,它显示的就不是待发货而是全部。

 

使用v-if在进行频繁操作的时候由于dom元素要不断的进行重新渲染,会导致性能下降。

总结：要根据不同的场景选择v-show或者v-if，有频繁切换的场景下尽量选择v-show能减少性能内耗以及诸多bug。在只需要单次修改的情况下使用v-if 防止不必要的dom元素渲染,提高运行速度。(例如,当列表为空时不显示就可以使用v-if去控制)

欢迎大家进行技术探讨和交流！！