Vue中v-if和v-show的区别

共同点：都是用来控制元素的显示与隐藏

不同点：

v-show通过css样式中的dispaly：none；控制元素显示、隐藏;

v-if直接控制的是vue生成的虚拟dom树，当虚拟dom树上的节点被删除时，vue的响应系统会实时的删除对应的真实dom树上的节点；从而控制元素的显隐。

使用场景：

v-show:此元素进入页面后，会频繁的改变显示状态，比如页面中有几个按钮，来控制某块区域的显示与隐藏。当用v-show来隐藏元素时，只会在初次加载时渲染此dom节点，之后都是通用display来控制显隐，如果此时使用v-if，那会频繁的操作dom，会极大的影响性能，但用display则不会。

举例：

 

v-if:  此元素进入页面后，此元素只会显示或隐藏不会被再次改变显示状态，此时用v-if更加合适，如请求后台接口通过后台数据控制某块内容是否显示或隐藏，且这个数据在当前页不会被修改。当用v-if来隐藏元素时，初次加载时就不用渲染此dom节点，提升页面加载速度

总结：v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好