v-if和v-show 的区别
2024-09-01 19:54:11
区别
- 1.手段:v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;
- 2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
- 3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
- 4.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
使用场景
基于以上区别,因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
总结
v-if判断是否加载,可以减轻服务器的压力,在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅,但有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
最新文章
- Noi2011 阿狸的打字机
- [专题汇总]AC自动机
- ResultSet几种类型的区别
- hdu 1162 Eddy's picture(最小生成树,基础)
- Jquery 全选、反选问题解析
- hdu 2212
- Source kit service terminated Editor functionality temporarily limited
- Powershell 快捷键
- PDF转word文档
- a链接易混淆与form表单简易验证用法详解
- ES 19 - Elasticsearch的检索语法(_search API的使用)
- (Solved) Nexiq USB link with CAT ET: connection error 149
- ERRORS: ?: (staticfiles.E002) The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting.
- Lodop窗口的按钮、权限,隐藏或设置功能不可用
- 电子书阅读(epub) --- calibre
- HBASE小结--待续使用
- (转)Java多线程学习(吐血超详细总结)
- WPF save listbox config
- LCX端口内网映射转发
- SQLite学习手册
热门文章
- three.js使用gpu选取物体并计算交点位置
- 手把手带你一键部署 Kubernetes + KubeSphere 至 Linux
- 都是为了生活组——‘’都是为了吃饭”微信小程序评价
- Java面向对象学习目录
- 2019-10-16:渗透测试,基础学习,burpsuit学习,爆破的四种方式学习
- 手把手教学h5小游戏 - 贪吃蛇
- C#学习笔记05--枚举/结构体
- 如何理解Nginx, WSGI, Flask(Django)之间的关系
- 从两个List集合里找到相同部分和不同部分
- 【IntelliJ IDEA】IDEA自动生成serialVersionUID的办法