【Vue面试题】v-show和v-if有什么区别?使用场景分别是什么?

# 一、v-show与v-if的共同点

我们都知道在 vuev-showv-if 的作用效果是相同的(不含v-else),都能控制元素在页面是否显示

在用法上也是相同的

<Model v-show="isShow" />
<Model v-if="isShow" />
  • 当表达式为true的时候,都会占据页面的位置
  • 当表达式都为false时,都不会占据页面位置

# 二、v-show与v-if的区别

  • 控制手段不同
  • 编译过程不同
  • 编译条件不同

控制手段:v-show隐藏则是为该元素添加css--display:nonedom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

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

编译条件:v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染

  • v-showfalse变为true的时候不会触发组件的生命周期

  • v-iffalse变为true的时候,触发组件的beforeCreatecreatebeforeMountmounted钩子,由true变为false的时候触发组件的beforeDestorydestoryed方法

性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;

# 三、v-show与v-if原理分析

具体解析流程这里不展开讲,大致流程如下

  • 将模板template转为ast结构的JS对象
  • ast得到的JS对象拼装renderstaticRenderFns函数
  • renderstaticRenderFns函数被调用后生成虚拟VNODE节点,该节点包含创建DOM节点所需信息
  • vm.patch函数通过虚拟DOM算法利用VNODE节点创建真实DOM节点

# v-show原理

不管初始条件是什么,元素总是会被渲染

我们看一下在vue中是如何实现的

代码很好理解,有transition就执行transition,没有就直接设置display属性

// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/packages/runtime-dom/src/directives/vShow.ts
export const vShow: ObjectDirective<VShowElement> = {beforeMount(el, { value }, { transition }) {el._vod = el.style.display === 'none' ? '' : el.style.displayif (transition && value) {transition.beforeEnter(el)} else {setDisplay(el, value)}},mounted(el, { value }, { transition }) {if (transition && value) {transition.enter(el)}},updated(el, { value, oldValue }, { transition }) {// ...},beforeUnmount(el, { value }) {setDisplay(el, value)}
}

# v-if原理

v-if在实现上比v-show要复杂的多,因为还有else else-if 等条件需要处理,这里我们也只摘抄源码中处理 v-if 的一小部分

返回一个node节点,render函数通过表达式的值来决定是否生成DOM

// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/src/transforms/vIf.ts
export const transformIf = createStructuralDirectiveTransform(/^(if|else|else-if)$/,(node, dir, context) => {return processIf(node, dir, context, (ifNode, branch, isRoot) => {// ...return () => {if (isRoot) {ifNode.codegenNode = createCodegenNodeForBranch(branch,key,context) as IfConditionalExpression} else {// attach this branch's codegen node to the v-if root.const parentCondition = getParentCondition(ifNode.codegenNode!)parentCondition.alternate = createCodegenNodeForBranch(branch,key + ifNode.branches.length - 1,context)}}})}
)

# 四、v-show与v-if的使用场景

v-ifv-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的(直接操作dom节点增加与删除)

如果需要非常频繁地切换,则使用 v-show 较好

如果在运行时条件很少改变,则使用 v-if 较好


转自:https://vue3js.cn/interview/vue/show_if.html#%E4%B8%89%E3%80%81v-show%E4%B8%8Ev-if%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90

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

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

相关文章

Android vehicle车辆属性新增demo

目录 前言一、Vehicle模块1.1 简介1.2 Vehicle框架1.3 主要功能和特点1.4 重要服务CarService1.4.1 简介1.4.2 组成1.4.3 启动时序1.4.4 作用 二、车辆属性新增demo2.1 CarPropertyService2.1.1 简介2.1.2 架构2.1.3 车辆属性 API2.1.4 CarPropertyService 初始化流程 2.2 App …

学习鸿蒙基础(9)

目录 一、鸿蒙国际化配置 二、鸿蒙常用组件介绍 三、鸿蒙像素单位介绍 四、鸿蒙布局介绍 1、Row与Column线性布局 2、层叠布局-Stack 3、弹性布局 4、栅格布局 5、网格布局 一、鸿蒙国际化配置 base目录下为默认的string。en_US对应美国的。zh_CN对应中国的。新增一个s…

Backend - gitea 首次建库(远端本地)

目录 一、建立远端储存库 1. 进入新增画面 2. 填写储存库名称&#xff08;如book&#xff09;&#xff0c;点击“建立”即可 二、本地关联远端储存库 1. 本地初始化储存库代码 &#xff08;1&#xff09;新建文件夹 &#xff08;2&#xff09;获取远端储存库 2. 本地编写…

阿基米德分牛问题及其Python求解

文章目录 题目大意sympy求解结果 题目大意 问 太阳神有一牛群&#xff0c;由白、黑、花、棕四种颜色的公、母牛组成&#xff0c;其间关系如下&#xff0c;求每种牛的个数。 公牛中&#xff0c;白牛多于棕牛&#xff0c;二者之差为黑牛的 1 2 1 3 \frac{1}{2}\frac{1}{3} 21​…

sql查询语法

单表查询 格式 select 字段列表 from 表明列表 where 条件列表 group by 分组字段列表 having 分组后的条件列表 limit 起始索引 每一页的数据量 基本查询 select 字段1&#xff0c;字段2&#xff0c;字段3 from 表名&#xff1b; select * from 表名&#xff1b; select 字段…

SpringBoot 集成分布式任务调度 XXL-JOB【保姆级上手】

文章目录 XXL-JOB 介绍分布式任务调度XXL-JOB 概述 快速入门下载源码初始化调度数据库编译源码调度中心调度中心介绍配置调度中心部署调度中心集群部署调度中心&#xff08;可选&#xff09;Docker 镜像方式搭建调度中心&#xff08;可选&#xff09; 执行器执行器介绍添加依赖…

机器学习-关联规则算法Apriori及编码实现

一、前置知识 在了解关联规则之前首先了解一些相关概念&#xff0c;包含项集、频繁项集、支持度、置信度、提升度等基础概念。假如我们在经营一家商品超市&#xff0c;顾客进行购买商品的订单信息如下&#xff1a; TID ItemsT1 {耳机&#xff0c;背包}T2{背包&#xff0c;手…

外包干了5天,技术退步明显.......

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入杭州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

JAVA面试大全之基础篇

目录 1、语法基础 1.1、面向对象特性?​​​​​​​ 1.2、a = a + b 与 a += b 的区别

发掘服务器硬件优势:怎样有效管理、维护、更新

1. 概述 服务器是许多信息技术的核心&#xff0c;通过提供计算和存储资源&#xff0c;以用于企业和机构的数据处理和存储。服务器硬件也是服务器的核心组成部分&#xff0c;在服务器架构和配置中扮演着重要角色。 服务器硬件的优势&#xff1a; - 提供更高的性能和处理能力。…

meanshift论文学习

1. abstract 2. 理论解读 目标函数 然后对(11)求导&#xff0c;求解x&#xff0c;x实际就是求解当图像位置的值&#xff0c;求导之后表示为&#xff1a; 进一步整理得&#xff1a; 上式第二项即为meanshift 进一步整理为 上式表明了均值漂移与核函数之间的关系。 3. 缺点…

AI预测福彩3D第22弹【2024年3月31日预测--第4套算法重新开始计算第8次测试】

昨天周六单位事情比较多&#xff0c;忙了一天&#xff0c;回来比较晚了&#xff0c;实在没有闲暇时间去做预测了&#xff0c;先给各位道个歉。今天上午比较忙&#xff0c;下午有点空&#xff0c;趁这个时间赶紧把预测的结果发出来供大家参考。 今天继续对第4套算法进行测试&…

阿里云的服务码获取的申请按钮怎么是灰色的

您好&#xff0c;您目前已经进入阿里云备案工单服务渠道&#xff0c;很高兴为您服务。工单渠道的服务响应时效为0-90分钟&#xff0c; 如您所遇到的问题比较着急&#xff0c;您可以通过阿里云官网右上角联系我们中的“在线服务”进行咨询&#xff0c;我们会第一时间为您服务。感…

CentOS7 磁盘相关的命令及磁盘重新调整分配

umount 在CentOS 7中&#xff0c;umount是一个常用的命令&#xff0c;用于卸载文件系统。以下是一些常用的umount命令&#xff1a; 卸载指定的文件系统&#xff1a; umount /dev/sdXN 其中&#xff0c;/dev/sdXN是你想要卸载的分区。例如&#xff0c;/dev/sda1。 卸载并…

【MySQL】聊聊全表查询会不会把数据库内存打爆

是实际的开发中&#xff0c;可能因为误操作。可能会执行一个全表扫描的SQL&#xff0c;如果这个表的数据比较大&#xff0c;比如10G&#xff0c;但是数据库内存8G &#xff0c;会不会将这个数据库内存打爆。带着这个问题&#xff0c;我们来深入学习下。其实主要就是一个server层…

Python数据分析七

一、Python之定义列表 当我们在Python中定义一个列表时&#xff0c;可以使用方括号 [] 和逗号 , 来将多个元素放在一起。以下是一个示例代码&#xff1a; # 定义一个空列表 my_list []# 定义一个带有初始元素的列表 my_list [1, 2, 3, 4, 5]# 列表中可以包含不同类型的数据…

每日一题 第五十六期 洛谷 k倍区间

[蓝桥杯 2017 省 B] k 倍区间 题目描述 给定一个长度为 N N N 的数列&#xff0c; A 1 , A 2 , ⋯ A N A_1,A_2, \cdots A_N A1​,A2​,⋯AN​&#xff0c;如果其中一段连续的子序列 A i , A i 1 , ⋯ A j ( i ≤ j ) A_i,A_{i1}, \cdots A_j(i \le j) Ai​,Ai1​,⋯Aj​(…

python-pytorch 常用api打卡0.1.330

python-pytorch 常用api打卡0.1.100 torch.nntorch.nn.Flattentorch.nn.Lineartorch.nn.ReLUtorch.nn Modulemodel.train(True) Tensor操作argmax函数 torch.nn torch.nn.Flatten 维度计数是从0开始m nn.Flatten()默认从1维开始合并合并的维度值&#xff0c;就是这些维度的乘…

python学习20:python中的函数知识点

python中的函数知识点 1.函数中的返回值 什么是函数的返回值&#xff1f;&#xff1a;函数在执行的时候&#xff0c;返回给调用者的结果返回值的应用语法&#xff1a;使用关键词return来返回结果注意&#xff1a;函数体在遇到return后就结束了&#xff0c;所以写在return后的…

KUKA机器人调整示教器灵敏度(校屏)

KUKA机器人KRC4的示教器升级后&#xff0c;示教器屏幕由之前的电阻屏改为电容屏&#xff0c;不仅在外观上有所变化&#xff0c;屏幕校准的方法也有所不同。通过以下方法分别对新旧两款示教器进行屏幕校正&#xff0c;调整示教器屏幕灵敏度。 对新款示教器而言&#xff1a; 一…