v-show和v-if的区别

v-show和v-if的区别

1. 两者都用于有条件地显示元素，v-show只需切换css的display即可显示或隐藏元素，而v-if提供了条件渲染地真正实现，它可创建或销毁组件；
2. v-show：无论初始条件是什么都会被渲染出来，只在display:none和display:block之间切换，false的时候对节点进行display:none;的操作，DOM会一直保留，在初始渲染时有更高的开销，但切换开销小，更适用于频繁切换；
3. v-if：当属性初始为false，只有在判断为true的时候才会对数据进行渲染，false的时候把包含的代码进行删除；并且切换条件时会触发销毁/挂载组件，所以切换时开销更高，更适合不经常切换的场景；
4. 应用场景：v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作；v-if更适合于带有权限的操作，渲染时判断权限数据，有则展示该功能，没有则删除。