前端面试题之v-if和v-show的区别

v-if和v-show都是Vue框架提供的指令，他们两个有着很像的作用，控制元素是否显示在页面上，不过他们两个适用的场景有些不同。

• 首先的话v-if 控制元素的显示与隐藏是会改动dom树结构的，如果通过v-if进行元素的隐藏的话，Vue将会直接将对应的dom节点删除。因为频繁的操作dom树会对性能造成影响，所以适用于那些进入页面后显示状态不会频繁改变的元素。例如菜单权限以及按钮权限，基本上在页面加载后就不会改变的元素，使用v-if会使页面加载更快。所以一般类似的场景推荐使用v-if。
• v-show是通过给元素添加CSS样式display:none来进行元素的隐藏，在dom结构中仍然可见。因此如果频繁的对某个元素进行显示与隐藏，更适合用v-show，因为此命令不操作dom树，对性能几乎没有影响。

 总结：

v-if和v-show的区别：v-if操作DOM树，频繁使用影响性能。v-show通过css样式display：none来隐藏元素，对性能影响较小。

v-if适用于条件不经常改变的情况，而v-show适用于需要频繁改变显示状态的情况。