vue中显隐方法常用两种,v-show和v-if,但这两种是有区别的。很多小白用得很随意,傻傻分不清,只知其然,不知其所以然。
实现本质方法区别
v-show本质就是标签display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
![9668f127d7f9993c26bf5a46e90bca1a.png](https://img-blog.csdnimg.cn/img_convert/9668f127d7f9993c26bf5a46e90bca1a.png)
编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show都会编译,初始值为false,只是将display设为none,但它也编译了
v-if初始值为false,就不会编译了
性能
v-show只编译一次,后面其实就是控制css,而v-if不停地销毁和创建,故v-show性能更好一点。
用法
v-if更灵活
使用场景如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。(1)对于管理系统的权限列表的展示,这里可以使用v-if来渲染,如果使用到v-show,对于用户没有的权限,在网页的源码中,仍然能够显示出该权限,如果用v-if,网页的源码中就不会显示出该权限。(在前后台分离情况下,后台不负责渲染页面的场景。)(2)对于前台页面的数据展示,这里推荐使用v-show,这样可以减少开发中不必要的麻烦。总结v-if和v-show都是用来控制元素的渲染。v-if判断是否加载,可以减轻服务器的压力,在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅,但有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
知识在线,共同探讨,一起搬砖,快乐生活,苦了头发。喜欢我就关注我吧!喜欢我就关注我吧!喜欢我就关注我