vue2-v-show和v-if有什么区别,使用场景分别是什么?

1、v-show和v-if的共同点
在vue中,v-if和v-show的作用效果是相同的(不含v-else),都能控制元素在页面是否显示,在用法上也相同。
在这里插入图片描述
当表达式为true的时候,都会占据页面的位置
当表达式为false的时候,都不会占据页面位置

2、v-show和v-if的区别
控制手段不同
编译过程不同
编译条件不同

控制手段:v-show隐藏则是为该元素添加css–display:none,dom元素依旧还在,v-if显示隐藏是将dom元素整个添加或删除
编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适的销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换
编译条件:v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。当渲染条件为假时,并不做操作,直到真时才渲染。
v-show由false变为true时,不会触发组件的生命周期。
v-if由false变为true时,触发组件的beforeCreate、create、beforeMount、mounted钩子,由true变为false的时候,触发组件的beforeDestory、destoryed方法
性能消耗:v-if有更高的切换消耗、v-show有更高的初始渲染消耗

3、v-show和v-if的原理分析
流程:
将模板template转化为ast结构的JS对象
用ast得到的JS对象拼装render和staticRenderFns函数
render和staticRenderFnc函数被调用后生成虚拟VNODE节点,该节点包含创建DOM节点的所需信息
vm.patch函数通过虚拟DOM算法利用VNODE节点创建真实的节点

v-show原理
不管初始条件是什么,元素总是被渲染
vue中通过:有transition就执行transition,没有就直接设置display属性
在这里插入图片描述
v-if渲染
v-if在实现上比v-show要复杂的多,因为还有else,else if等条件需要处理
这里展示返回一个node节点,render函数通过表达式的值来决定是否生成DOM
在这里插入图片描述
4、v-show与v-if的使用场景
v-if和v-show都能控制dom元素在页面的显示
v-if相比较于v-show开销更大(直接操作dom节点的增加与删除)
如果需要非常频繁地切换,则使用v-show比较好
如果在运行时条件很少改变,则使用v-if较好

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

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

相关文章

css3 hover border 流动效果

/* Hover 边线流动 */.hoverDrawLine {border: 0 !important;position: relative;border-radius: 5px;--border-color: #60daaa; } .hoverDrawLine::before, .hoverDrawLine::after {box-sizing: border-box;content: ;position: absolute;border: 2px solid transparent;borde…

TCP的三次握手和四次挥手······详解

1、三次握手 三次握手是建立连接的过程 如图大致为三次握手的流程图: 当客户端对服务端发起连接时,会先发一个包连接请求数据,去询问能否建立连接,该数据包称为 “SYN”包 然后,如果对方同意连接,那么…

九耶|阁瑞钛伦特 Java中,锁的实现方式

在Java中,锁的实现方式有以下几种: 1. Synchronized关键字:使用synchronized关键字可以创建一个互斥锁,它可以保证同一时刻只有一个线程可以进入被synchronized关键字修饰的代码块或方法。 2. ReentrantLock类:Reentr…

二叉树进阶版(C)

文章目录 1.树1.1概念1.2相关定义1.3 表示(左孩子右兄弟) 2.二叉树2.1概念2.2特殊的二叉树1. 满二叉树:2. 完全二叉树: 2.3二叉树的性质2.4练习 3.二叉树的存储结构1. 顺序存储2. 链式存储 4.完全二叉树的代码实现4.1堆的介绍1.堆…

【雕爷学编程】Arduino动手做(184)---快餐盒盖,极低成本搭建机器人实验平台3

吃完快餐粥,除了粥的味道不错之外,我对个快餐盒的圆盖子产生了兴趣,能否做个极低成本的简易机器人呢?也许只需要二十元左右 知识点:轮子(wheel) 中国词语。是用不同材料制成的圆形滚动物体。简…

Qt展示动态波形

Qt展示动态波形 需求描述成品展示实现难点Qt多线程 需求描述 接入串口,配置串口顺序进行接收数据;数据分成两个串口分别传入,使用多线程并发接入;时域数据有两个通道(I,Q),分别以实…

zookeeper入门学习

zookeeper入门学习 zookeeper应用场景 分布式协调组件 客户端第一次请求发给服务器2,将flag值修改为false,第二次请求被负载均衡到服务器1,访问到的flag也会是false 一旦有节点发生改变,就会通知所有监听方改变自己的值&#…

【C++】类和对象-多态

1.多态的基本语法 代码 #include <iostream> using namespace std; /******************************************/ class Animal { public://speak函数就是虚函数//函数前面加上virtual关键字&#xff0c;变成虚函数&#xff0c;//那么编译器在编译的时候就不能确定函数…

DevExpress WPF Tree List组件,让数据可视化程度更高!(二)

DevExpress WPF Tree List组件是一个功能齐全、数据感知的TreeView-ListView混合体&#xff0c;可以把数据信息显示为REE、GRID或两者的组合&#xff0c;在数据绑定或非绑定模式下&#xff0c;具有完整的数据编辑支持。 在上文中&#xff08;点击这里回顾DevExpress WPF Tree …

中介者模式——协调多个对象之间的交互

1、简介 1.1、概述 如果在一个系统中对象之间的联系呈现为网状结构&#xff0c;如下图所示&#xff1a; 对象之间存在大量的多对多联系&#xff0c;将导致系统非常复杂&#xff0c;这些对象既会影响别的对象&#xff0c;也会被别的对象所影响&#xff0c;这些对象称为同事对…

LeetCode--HOT100题(21)

目录 题目描述&#xff1a;240. 搜索二维矩阵 II&#xff08;中等&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;240. 搜索二维矩阵 II&#xff08;中等&#xff09; 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&am…

【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight 2

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

【力扣】链表题目总结

文章目录 链表基础题型一、单链表翻转、反转、旋转1.反转链表2.反转链表II——反转部分链表3.旋转链表4.K个一组翻转链表5.反转偶数长度组的节点 二、删除单链表中的结点1.删除链表的结点2.删除未排序链表中的重复节点3.删除已排序链表中的重复元素I——重复元素只剩下一个4.删…

分库分表概念、原理、拆分策略和实现技术讲解

文章目录 1.什么是分库分表2.分库分表拆分策略2.1 垂直拆分2.2 水平拆分 3.分库分表实现技术简介 1.什么是分库分表 分库分表的中心思想就是将数据分散存储&#xff0c;使得单一数据库/表的数据量变小来缓解单一数据库的性能问题&#xff0c;从而达到提升数据库性能的目的。 …

Redis面试题2

Redis面试题-2 10、统计高并发网站每个网页每天的 UV 数据&#xff0c;结合Redis你会如何实现&#xff1f; 选用方案&#xff1a;HyperLogLog 如果统计 PV 那非常好办&#xff0c;给每个网页一个独立的 Redis 计数器就可以了&#xff0c;这个计数器的 key 后缀加上当天的日期…

vue+element中如何设置单个el-date-picker开始时间和结束时间关联

功能&#xff1a;选了开始时间&#xff0c;则结束时间只能选择开始时间之后的&#xff1b;选了结束时间&#xff0c;则开始时间只能选择结束时间之前的 重点是picker-options属性 图示&#xff1a; 代码展示: // body 内部<el-form-item><el-date-pickerv-model&qu…

提高测试用例质量的6大注意事项

在软件测试中&#xff0c;经常会遇到测试用例设计不完整&#xff0c;用例没有完全覆盖需求等问题&#xff0c;这样往往容易造成测试工作效率低下&#xff0c;不能及时发现项目问题&#xff0c;无形中增加了项目风险。 因此提高测试用例质量&#xff0c;就显得尤为重要。一般来说…

day50-springboot+ajax分页

分页依赖&#xff1a; <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.0.0</version> </dependency> 配置&#xff1a; …

Linux中提示No such file or directory解决方法

说明&#xff1a; 在linux下&#xff0c;./xxx.sh执行shell脚本时会提示No such file or directory。但shell明明存在&#xff0c;为什么就是会提示这个呢&#xff1f; 这种其实是因为编码方式不对&#xff0c;如你在win下编辑sh&#xff0c;然后直接复制到linux下面 实现&…

记一次ubuntu16误删libc.so.6操作的恢复过程

背景 操作系统&#xff1a;ubuntu16 glibc版本&#xff1a;2.23 修改原因&#xff1a; 经过一系列报错和手工构建之后&#xff0c;vulkansdk成功安装&#xff08;起码运行./vulkansdu成功&#xff09;&#xff0c;在进行./vulkaninfo进行验证时&#xff0c;报错&#xff1a…