博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue中v-if 和 v-show的区别
阅读量:7221 次
发布时间:2019-06-29

本文共 548 字,大约阅读时间需要 1 分钟。

简单来说,v-if 的初始化较快,但切换代价高;v-show 初始化慢,但切换成本低

1.共同点

v-if 和 v-show 都可以动态地显示DOM元素

2.区别

(1)手段:

v-if 是动态的向DOM树内添加或者删除DOM元素;

v-show 是通过设置DOM元素的display样式属性控制显隐;

(2)编译过程:

v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;

v-show只是简单的基于css切换;

(3)编译条件:

v-if 是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);

v-show 是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

(4)性能消耗:

v-if 有更高的切换消耗;

v-show 有更高的初始渲染消耗;

(5)使用场景:

v-if 适合运营条件不大可能改变;

v-show 适合频繁切换。

更多内容请参见原文http://www.cnblogs.com/wmhuang/p/5420344.html

转载于:https://www.cnblogs.com/cckui/p/7492437.html

你可能感兴趣的文章
设置MySQL数据库超时
查看>>
一致性hash算法
查看>>
lua + redis 的去重队列
查看>>
web负载均衡(ipvsadm)(未成)
查看>>
抓取存储quota超过80%的users
查看>>
C语言经典算法100例
查看>>
速成CAD版本转换的教程
查看>>
CAD文件图纸过大,该怎么解决?
查看>>
Spring aop 切不进去原因。。
查看>>
PHP获取客户端IP
查看>>
php开发APP接口-封装通信接口改进版
查看>>
Android系统性能演变历程
查看>>
OSChina 周三乱弹 —— 打醒精神去瞌睡
查看>>
SSH 密钥登录linux
查看>>
你必须掌握的 21 个 Java 核心技术!
查看>>
告诉你WHT中文站是什么?
查看>>
4、Juniper SSG520 PPTP映射到ROS后MAC无法连接解决方法
查看>>
利用批处理文件来建立一个记录3389登陆者信息
查看>>
Linux 系统下双机HA的实现
查看>>
02_swarm mode key concepts
查看>>