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

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

v-show

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

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

v-if

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

直到条件为 true时,才会创建出来;

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

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

总结

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

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

猜你喜欢

转载自blog.csdn.net/weixin_43852569/article/details/120123941