vue指令v-if和v-show的区别

v-if和v-show这两个指令都可以用来控制元素的可见/不可见。

它们的区别体现在三个方面

1. 原理 2. 性能 3. 场景

从原理来看

v-if的原理是动态创建和销毁；因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁 和重建，操作的实际上是dom元素的创建或销毁。

v-show的原理是纯CSS样式的显示和隐藏 如果v-if指令的值是从true->false就销毁它； 如果值从false->true就创建它 如果v-show指令的值是从true->false就显示它（display:none）； 如果值从false->true就显示它(display:block)

从性能方面来看

v-if有更高的切换开销（销毁~重建）而v-show有更高的初始渲染开销：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换 它操作的display:none/block属性。如果在运行时条件很少改变，则使用 v-if 较好。

从场景来看

v-show适合做纯页面的交互，例如：抽屉菜单，折叠面板等；v-if适合结合v-else来根据不同的逻辑展示内容，例如用户登录之后根据权限不同来展示不同类型的头像图标。