Vue指令中v-show 与 v-if 区别

Vue指令中v-show 与 v-if 区别

v-show

v-show 只是在 display: none 和 display: block 之间切换。

无论初始条件是什么都会被渲染出来，后面只需要切换 CSS 或是切换下判断条件，DOM 还是会一直保留着的。

v-if

v-if的话就得说到 Vue 底层的编译了。当 v-if 的判断条件为 false 时，组件或DOM元素就不会被渲染，也就是说根本不会创建这个组件或DOM元素；

直到条件为 true时，才会创建出来；

当判断条件发生切换时会触发销毁/挂载组件，所以 v-if 在切换时开销会比较高；

并且基于 v-if 的这种惰性渲染机制，可以在必要的时候才去渲染组件，减少整个页面的初始渲染开销。

总结

综合起来看， v-show 在初始渲染时有更高的开销，但是切换开销很小，更适合于频繁切换的场景；

v-if 在初始时开销比较少，可以只在需要的时候再去创建组件或DOM元素，但是在切换时开销会比较高，更适合不经常切换的场景；