Vue面试之v-if与v-show的区别

Vue面试之v-if与v-show的区别

  • DOM渲染
  • 初始渲染性能
  • 切换开销
  • 标签配合
  • 源码实现

最近在整理一些前端面试中经常被问到的问题,分为vue相关、react相关、js相关、react相关等等专题,可持续关注后续内容,会不断进行整理~

作为Vue中两种条件性渲染元素的指令,v-if和v-show还是有一些区别的:

DOM渲染

  • v-if
       在条件切换时,元素的创建和销毁都会发生,即当条件为“true”时,元素就会被渲染到DOM中;反之当条件为“false”时,元素就会从DOM中移除
  • v-show
       在条件切换时,元素的创建和销毁不会发生,即不管条件是“true”还是“false”,元素都会被渲染到DOM中;只是通过css属性的“display”属性来控制元素的显示和隐藏;

初始渲染性能

  • v-if
       在初始渲染时,若条件为“false”,则元素不会被渲染到DOM中
  • v-show
       在初始渲染时,不管条件真否,元素都会渲染到DOM中,只是显示与否的问题,因此会有一定的初始性能消耗;

切换开销

  • v-if
       在条件真假切换时,所对应的DOM元素会被反复的创建和销毁,会有一定的切换性能消耗
  • v-show
       不管条件真假,DOM元素都不会被改变,只是通过display属性进行显示和隐藏,当条件为真时,对应显示;反正隐藏;因此切换开销较小

标签配合

  • v-if
       v-if可以用在标签上,并且可以与v-else配合使用
  • v-show
       上述两种情况都不行

源码实现

  • v-if
       v-if通过在编译阶段生成条件判断代码(三元表达式判断),根据条件的真假来决   定是否执行该判断代码,进而控制元素的渲染或销毁。
    v-if的源码实现
  • v-show
       v-show是通过设置元素的style属性,将display样式属性设置为none(隐藏)或其它值(原本设置的非none值),进而控制元素的可见性;
    v-show的源码实现

总而言之,选择使用 v-if 还是 v-show 取决于具体的使用场景和性能需求。如果元素的显示频繁切换,而且在切换时的开销较小,可以考虑使用 v-show。如果元素的显示条件在运行时很少改变可以选择 v-if。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629947.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用C++读取SQL Server数据库中的数据并转换为UNICODE类型

要使用C读取SQL Server数据库中的数据并转换为UNICODE类型&#xff0c;可以使用ODBC库和UNICODE编码函数。 首先&#xff0c;确保已安装SQL Server的ODBC驱动程序&#xff0c;并在项目中包含ODBC头文件<sql.h>和<sqlext.h>。 接下来&#xff0c;可以按照以下步骤进…

C#,入门教程(17)——条件语句(if-else)的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(16)——可变数据类型&#xff08;var&#xff09;的基础知识与使用禁忌https://blog.csdn.net/beijinghorn/article/details/124032216 程序的核心是逻辑。 逻辑的核心是布尔条件表达式。 逻辑的主要体现形式之一是 if-else 语句…

上位机编程:ASCII码精讲

一 ASCII码介绍&#xff1a; ASCII&#xff08;American Standard Code for Information Interchange&#xff09;码是一种使用数字来表示字符的编码标准。它是一种字符编码&#xff0c;将常见的字符映射到数字&#xff0c;以便计算机能够理解和处理文本数据。 ASCII码最初是为…

十大排序算法模板

☆* o(≧▽≦)o *☆嗨~我是小奥&#x1f379; &#x1f4c4;&#x1f4c4;&#x1f4c4;个人博客&#xff1a;小奥的博客 &#x1f4c4;&#x1f4c4;&#x1f4c4;CSDN&#xff1a;个人CSDN &#x1f4d9;&#x1f4d9;&#x1f4d9;Github&#xff1a;传送门 &#x1f4c5;&a…

通信行业无线基本概念

fast roaming&#xff08;快速漫游&#xff09;&#xff1a;使用户在不同的基站&#xff08;access point&#xff09;间可以平滑的切换&#xff0c;在802.11r协议标准中定义。band steering&#xff08;波段转向&#xff09;&#xff1a;在双频段&#xff08;2.4G和5G&#xf…

本地一键部署grafana+prometheus

本地k8s集群内一键部署grafanaprometheus 说明&#xff1a; 此一键部署grafanaPrometheus已包含&#xff1a; victoria-metrics 存储prometheus-servergrafanaprometheus-kube-state-metricsprometheus-node-exporterblackbox-exporter grafana内已导入基础的dashboard【7个…

【SpringBoot系列】AOP详解

🤵‍♂️ 个人主页:@香菜的个人主页,加 ischongxin ,备注csdn ✍🏻作者简介:csdn 认证博客专家,游戏开发领域优质创作者,华为云享专家,2021年度华为云年度十佳博主 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞👍🏻 收…

户外火光如何玩转?智能酒精壁炉安全使用攻略大揭秘!

在户外使用智能酒精壁炉是一个别致而令人惬意的选择&#xff0c;但在享受户外炉火带来的温馨时&#xff0c;也需要注意一些安全和使用细节。下面将介绍智能酒精壁炉在户外使用需要注意的事项。 智能酒精壁炉需放置在平坦、通风的户外场地&#xff0c;远离易燃物体&#xff0c;确…

Maven 搭建私服

一、Maven 私服简介 1.1 私服简介 Maven 私服是一种特殊的 Maven 远程仓库&#xff0c;它是架设在局域网内的仓库服务&#xff0c;用来代理位于外部的远程仓库&#xff08;中央仓库、其他远程公共仓库&#xff09;。 当然也并不是说私服只能建立在局域网&#xff0c;也有很多公…

网络部署实战具体学习内容总结

网络部署实战具体学习内容总结 &#x1f4bb;网络部署实战课程通常旨在教授学生如何规划、配置、维护和优化计算机网络。这些课程涵盖了广泛的主题&#xff0c;以确保学生具备网络部署和管理所需的技能。 网络部署实战课程具体学习内容&#x1f447; 1️⃣网络架构设计及网络原…

第一个Python程序_获取网页 HTML 信息[Python爬虫学习笔记]

使用 Python 内置的 urllib 库获取网页的 html 信息。注意&#xff0c;urllib 库属于 Python 的标准库模块&#xff0c;无须单独安装&#xff0c;它是 Python 爬虫的常用模块。 获取网页 HTML 信息 1) 获取响应对象 向百度&#xff08;http://www.baidu.com/&#xff09;发起…

九州金榜|孩子厌学是家庭教育原因还是学校教育原因?

孩子厌学&#xff0c;这是一个让所有家长的头疼的问题&#xff0c;尤其在看到别人家孩子是学霸的时候&#xff0c;就更会有种莫名其妙的伤感&#xff0c;然后回想自己的孩子&#xff0c;仿佛全都是缺点&#xff0c;家长要是有这种想法那就大错特错了&#xff0c;其实每个孩子都…

杨中科 .NETCORE EFCORE第七部分 一对一,多对多

一对一 一对一关系配置 1、builder.HasOne(o >o.Delivery).WithOne(d>d.Order).HasForeignKey(d>dOrderId); 2、测试插入和获取数据 示例 新建 Order 新建 Delivery DeliveryConfig OrderConfig 执行 迁移命令 查看数据库 测试数据插入 运行查看数据 多对多…

【Shell编程练习】编写 shell 脚本,打印 9*9 乘法表

系列文章目录 输出Hello World 通过位置变量创建 Linux 系统账户及密码 监控内存和磁盘容量&#xff0c;小于给定值时报警 猜大小 输入三个数并进行升序排序 编写脚本测试 192.168.4.0/24 整个网段中哪些主机处于开机状态,哪些主机处于关机状态 系列文章目录编写 shell 脚本,打…

软件测试|如何使用selenium处理下拉框?

简介 下拉框是网页表单中常见的元素之一&#xff0c;通常用于选择不同的选项。对于我们的自动化测试工作来说&#xff0c;操作下拉框是我们经常需要处理的元素&#xff0c;selenium作为我们最常使用的web自动化测试框架&#xff0c;也是支持我们对下拉框进行操作的。本文我们就…

【问题+解决】axios/vue/element/echarts引入报错

缘由 笔者在html页面引用vue来快速实现页面&#xff1b;<head></head>中通过<script>src""></script>方法引入&#xff0c;开始引入&#xff0c;应用都是正常&#xff0c;后来用了也没问题&#xff1b;奇怪的是&#xff0c;前几天发现htm…

代码随想录算法训练营第6天 | 242.有效的字母异位词 , 349. 两个数组的交集 , 202. 快乐数 , 1. 两数之和

哈希知识基础 文章链接&#xff1a;https://programmercarl.com/%E5%93%88%E5%B8%8C%E8%A1%A8%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html#%E5%93%88%E5%B8%8C%E8%A1%A8 242.有效的字母异位词 题目链接&#xff1a;https://leetcode.cn/problems/valid-anagram/description/…

Qt根据单价计算总价与进制转换

1.相关说明 二进制、十进制、十六进制间的相互转换 2.界面绘制 3.相关主要代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete …

路由黑洞和黑洞路由的区别

路由黑洞&#xff1a; 路由黑洞是一种现象&#xff0c;一般是在网络边界做汇总回程路由的时候产生的一种不太愿意出现的现象&#xff0c;就是汇总的时候有时会有一些不在内网中存在的网段&#xff0c;但是又包含在汇总后的网段中&#xff0c;如果在这个汇总的边界设备上同时还配…

前端每次发版提示用户

vue前端现在每次发版本想提示用户刷新页面&#xff0c;主要思路如下 public 中创建 JSON 文件&#xff0c;设置版本号为数字 1 // version.json { "version": 1 }编写 node 脚本&#xff0c;每次发版本&#xff0c;运行脚本将版本号自增 1 // versionHandle.js con…