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元素,但是在切换时开销会比较高,更适合不经常切换的场景;