Vue中 v-show 和 v-if 有什么区别

Vue中的 v-show 和 v-if

  • 一.v-show 与 v-if 原理分析
    • v-show 原理
    • v-if 原理
  • 二、v-show 与 v-if 的共同点
  • 三、v-show 与 v-if 的区别
  • 四、v-show 与 v-if 的使用场景
    • 使用 v-show 的场景:
    • 使用 v-if 的场景:
  • 五、v-show 与 v-if 的优缺点
    • v-show
      • 优点:
      • 缺点:
    • v-if
      • 优点:
      • 缺点:

一.v-show 与 v-if 原理分析

大致流程如下,就不细说了。

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

v-show 原理

不管初始条件是什么,元素总是会被渲染。
我们看一下在vue中是如何实现的
代码很好理解,有transition就执行transition,没有就直接设置display属性

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 原理

  1. 解析阶段:在编译模板过程中,当遇到带有 v-if 指令的元素时,会将该指令解析成一个对应的 Vue 实例中的 _directive 对象。

  2. 渲染阶段:当 Vue 实例进行渲染时,会通过指令对象的 bind 方法来初始化指令,并根据条件表达式的值判断是否渲染元素。如果条件为真,则创建并插入元素及其 DOM 结构到父元素中;如果条件为假,则移除元素及其 DOM 结构。

  3. 更新阶段:当条件表达式的值发生变化时,Vue 实例会通过指令对象的 update 方法来更新元素的显示状态。如果条件从假变为真,则创建并插入元素及其 DOM 结构;如果条件从真变为假,则移除元素及其 DOM 结构。

  4. 销毁阶段:当 Vue 实例被销毁时,会调用指令对象的 unbind 方法来清理相应的事件监听器、DOM 结构等资源。

当一个页面需要根据用户登录状态来显示不同的内容时,可以使用 v-if 指令。

html部分-----------------------------------------------------<div><h1>Welcome to my website!</h1><template v-if="isLoggedin"><p>Hello, {{ username }}! You are logged in.</p><button @click="logout">Logout</button></template><template v-else><p>Please login to access the content.</p><button @click="login">Login</button></template>
</div>js部分-------------------------------------------------------new Vue({el: '#app',data() {return {isLoggedin: false,username: ''};},methods: {login() {// 模拟登录操作this.isLoggedin = true;this.username = 'John';},logout() {// 模拟登出操作this.isLoggedin = false;this.username = '';}}
});

在上述例子中,根据 isLoggedin 的值,页面会渲染不同的内容。如果用户已登录,则显示欢迎信息和登出按钮;如果用户未登录,则显示登录提示和登录按钮。通过修改 isLoggedin 的值,可以动态地切换显示不同的内容。

这里使用了 v-if 指令将不同的模块包裹在 template 标签中,并通过条件表达式来决定是否渲染对应的模块。当 isLoggedin 为真时,显示已登录的内容;当 isLoggedin 为假时,显示未登录的内容。通过点击登录按钮和登出按钮,可以切换登录状态并更新页面的显示。

总的来说,v-if 指令实现了一种惰性地渲染元素的机制,它会根据条件表达式的值动态地创建或销毁元素及其 DOM 结构。通过控制元素的插入和移除,v-if 指令能够提供更高的灵活性和性能优化,但也会带来一定的渲染开销。因此,在选择 v-if 还是 v-show 时,需要根据具体的需求和性能考虑来决定使用哪种方式。

二、v-show 与 v-if 的共同点

v-showv-if 都是 Vue 框架中用于控制元素显示/隐藏的指令。

  1. 都可以通过一个布尔类型的条件表达式来判断是否渲染元素。
  2. 在条件为假时,不会显示元素。
  3. 在条件为真时,会显示元素。
  4. 当条件表达式的值发生变化时,都可以更新元素的显示状态。

三、v-show 与 v-if 的区别

  1. 状态初始化
  • v-show:元素一开始会被渲染到 DOM 中,并且可以通过 CSS 的 display 属性进行显示和隐藏。初始状态下,元素始终存在于 DOM 结构中。
  • v-if:元素的渲染是惰性的,仅在条件为 true 时才会被渲染到 DOM 中。初始状态下,元素可能不在 DOM 结构中。
  1. 条件更新
  • v-show:只根据表达式的值来切换元素的显示和隐藏,当表达式的值为 true 时元素显示,为 false 时元素隐藏。元素的 DOM 结构一直保持存在,只是 CSS 的 display 属性在切换显示状态。
  • v-if:根据条件表达式的真假动态创建或销毁元素及其对应的 DOM 结构。当条件为 true 时元素渲染到 DOM 中,为 false 时元素从 DOM 中移除。
  1. 性能影响
  • v-show:由于元素始终存在于 DOM 中,只是通过修改 CSS 的 display 属性来控制显示和隐藏,所以切换显示状态的性能开销较小。
  • v-if:根据条件动态地创建和销毁元素及其 DOM 结构,切换显示状态时会有一定的性能开销。如果需要频繁切换显示状态或对性能要求较高的情况下,可以考虑使用 v-show 替代 v-if。

综上所述,v-show 适用于频繁切换显示状态的元素,而 v-if 适用于在条件变化时动态地创建或销毁元素。根据具体需求和性能考虑,选择适合的指令来控制元素的显示和隐藏。

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

使用 v-show 的场景:

  1. 需要频繁切换显示状态的元素:由于 v-show 只是通过修改 display 属性来隐藏或显示元素,因此适用于需要频繁切换显示状态的情况,不会造成大量 DOM 元素的创建和销毁。
  2. 对性能要求较高的场景:相比于 v-ifv-show 的渲染开销较小,因为元素并不会被频繁地创建和销毁,适用于对性能要求较高的场景。

使用 v-if 的场景:

  1. 需要条件渲染的复杂组件:如果一个组件的渲染逻辑比较复杂,包含大量的子组件、计算属性等,可以使用 v-if 来根据条件动态地创建或销毁该组件,以减少不必要的渲染开销。
  2. 需要延迟加载的组件:使用 v-if 可以将组件按需加载,只在需要的时候才进行渲染,可以提升初始加载性能和减少资源占用。
  3. 需要在 DOM 中完全移除元素的场景:由于 v-if 会在条件为假时将元素从 DOM 中移除,适用于需要完全移除元素的场景,节省DOM空间和资源占用。

综上所述,v-show 适用于频繁切换显示状态的元素和对性能要求较高的场景,而 v-if 适用于需要条件渲染、延迟加载或完全移除元素的场景。根据具体的需求和性能考虑,选择合适的指令来控制元素的显示与隐藏。

五、v-show 与 v-if 的优缺点

v-show

优点:

  • 元素始终存在于 DOM 结构中,只是通过修改 CSS 的 display 属性来控制显示和隐藏,因此切换显示状态的性能开销较小。
  • 不会重复渲染元素,因为元素始终存在于 DOM 结构中,适用于频繁切换显示状态的元素。

缺点:

  • 在元素较多时,可能会对页面性能产生负面影响,因为这些元素仍然存在于 DOM 中。

v-if

优点:

  • 根据条件表达式的真假动态创建或销毁元素及其对应的 DOM 结构,因此可以在需要时减少页面中 DOM 元素的数量,提高页面性能。
  • 在显示状态切换时避免了重复渲染,因此更适合对性能要求较高的场景。

缺点:

  • 在频繁切换显示状态时,会进行创建和销毁元素及其对应的 DOM 结构,这会带来一定的性能开销。
  • 如果使用 v-if 控制的元素在页面中出现的次数很多,就需要频繁的创建和销毁大量的 DOM 元素,可能会对页面的性能产生不利影响。

综上所述,v-show 适合需要频繁切换显示状态的元素,而 v-if 适合在条件变化时动态地创建或销毁元素。具体使用哪种方式,还需要根据具体的业务情况和性能需求来进行选择。

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

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

相关文章

kafka rebalance(再均衡)导致的消息积压分析

起因&#xff1a; 某天&#xff0c;项目组收到大量的kafka消息积压告警。查看了kafka日志后&#xff0c;发现 kafka不断地 rebalance(再均衡)。 Rebalance (再均衡)&#xff1a; 分区的所有权从一个消费者转移到另一个消费者&#xff0c;这样的行为被称为Rebalance (再均衡)…

修改汽车的控制系统实现自动驾驶,基于一个开源的汽车驾驶辅助系统实现全自动驾驶

修改汽车的控制系统实现自动驾驶,基于一个开源的汽车驾驶辅助系统实现全自动驾驶。 自动驾驶汽车依靠人工智能、视觉计算、雷达、监控装置和全球定位系统协同合作,让电脑可以在没有任何人类主动的操作下,自动安全地操作机动车辆。 演示视频: Openpilot :一个开源的汽车驾…

Socks5代理与代理IP的技术创新

随着全球市场的开放和跨界电商的崛起&#xff0c;企业在出海过程中面临着复杂多变的网络环境和地域限制。在这一背景下&#xff0c;Socks5代理和代理IP等技术应运而生&#xff0c;成为助力企业突破网络壁垒、实现出海目标的重要工具。本文将深入探讨Socks5代理和代理IP在跨界电…

OpenSSL 3.x爆出漏洞,如何妥善应对?

10月25日&#xff0c;OpenSSL项目团队发布了OpenSSL 3.x版中一个关键安全漏洞的修复程序。该修复程序已于11月1日正式发布。 由于OpenSSL有着极为广泛的使用&#xff0c;该公告引起了很大反响。Akamai希望能通过本文帮助相关用户了解情况&#xff0c;介绍有关检测和缓解威胁的…

怎么消除视频中所有的声音?方法很简单

当我们想把视频中去掉声音&#xff0c;可能有多种原因&#xff0c;也许需要制作一个无声视频&#xff0c;或者想在视频中添加自己的音乐或解说&#xff0c;特别是一些搞笑解说&#xff0c;无论原因是什么&#xff0c;到底要怎么把视频中所有的声音都去除呢&#xff1f; 小编给…

计算机毕业设计 基于Web的网上购物系统(pc端仿淘宝系统)的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

SVN优缺点详解及版本控制系统选型建议

Subversion (SVN)是目前可用的众多版本控制选项之一。本篇文章将全面概述什么是 SVN、SVN的历史、SVN存储库是什么&#xff0c;以及在切换到SVN之前您应该谨慎考虑的潜在问题。 什么是Subversion&#xff08;SVN&#xff09;&#xff1f; Subversion软件&#xff0c;也称为SV…

管理类联考——数学——真题篇——按知识分类——代数

文章目录 2023真题(2023-09)-代数-一元二次方程-注意绝对值的有效性真题(2023-17)-代数-一元二次方程-举反例真题(2023-18)-数列-等比数列真题(2023-24)-数列-等比数列2022真题(2022-03)-代数-整式-因式分解真题(2022-19)-数列-等比数列真题(2022-21)-数列-等比数…

Docker的常用命令(没有废话)

目录 镜像 镜像管理命令 镜像构建命令 镜像标签和推送命令 其他命令 容器 运行容器 停止和删除容器 查看容器信息 进入容器 数据卷 列出卷 创建和删除卷 将卷挂载到容器 镜像 镜像管理命令 docker images # 列出本地所有的镜像 docker search <关键词> #…

使用pe安装windows操作系统

一、系统安装前准备工作&#xff0c;制作系统盘 &#xff08;1&#xff09;拷贝电脑上的资料 &#xff08;2&#xff09;准备一个至少8G的U盘 &#xff08;3&#xff09;下载windows镜像文件及pe软件 通过百度网盘可下载下列软件及镜像 windows镜像文件&#xff08;百度网盘…

知识笔记(五十二)———MySQL 安装

Linux/UNIX 上安装 MySQL Linux平台上推荐使用RPM包来安装Mysql,MySQL AB提供了以下RPM包的下载地址&#xff1a; MySQL - MySQL服务器。你需要该选项&#xff0c;除非你只想连接运行在另一台机器上的MySQL服务器。MySQL-client - MySQL 客户端程序&#xff0c;用于连接并操作…

Kotlin 中的 `as` 关键字:类型转换的艺术

在 Android 编程中&#xff0c;类型转换是一项常见的操作。为了使这一过程更加流畅和安全&#xff0c;Kotlin 提供了 as 关键字。本文将深入探讨 as 关键字的用法和最佳实践。 一、as 关键字的基本概念 &#x1f680; as 关键字在 Kotlin 中用于显式类型转换。它将一个表达式…

vue零基础

vue 与其他框架的对比 框架设计模式数据绑定灵活度文件模式复杂性学习曲线生态VueMVVM双向灵活单文件小缓完善ReactMVC单向较灵活all in js大陡丰富AngularMVC双向固定多文件较大较陡&#xff08;Typescript&#xff09;独立 更多对比细节&#xff1a;vue 官网&#xff1a;ht…

matplotlib绘图时show函数需在save函数后

matplotlib绘图时&#xff0c;先调用show&#xff0c;后调用save函数保存图像&#xff0c;否则无法保存图像信息 figsize 23,10 #fig, axes plt.subplots(nrows1, ncols2) fig, axs plt.subplots(4, 3, sharexcol,shareyrow,figsizefigsize) # 在每个子图中绘制一个图形 pi…

2023-12-05 Qt学习总结3

点击 <C 语言编程核心突破> 快速C语言入门 Qt学习总结 前言九 QObject基类十 QWidget基类十一 QMainWindow类总结 前言 要解决问题: 学习qt最核心知识, 多一个都不学. 九 QObject基类 QObject是Qt中最基本的类&#xff0c;所有Qt中的对象都从该基类派生而来。 QObjec…

Hbase2.5.5分布式部署安装记录

文章目录 1 环境准备1.1 节点部署情况1.2 安装说明 2 Hbase安装过程Step1&#xff1a;Step2:Step3:Step4&#xff1a; 3 Web UI检查状态并测试3.1 Web UI3.2 创建测试命名空间 1 环境准备 1.1 节点部署情况 Hadoop11&#xff1a;Hadoop3.1.4 、 zookeeper3.4.6、jdk8 Hadoop1…

JOSEF 静态延时中间继电器 JZS-7G/42 DC110V 导轨安装

系列型号&#xff1a; JZS-7G-57端子排延时中间继电器&#xff1b; JZS-7G-42X端子排延时中间继电器&#xff1b; JZS-7G-22X端子排延时中间继电器&#xff1b; JZS-7G-21端子排延时中间继电器&#xff1b; JZS-7G-41端子排延时中间继电器&#xff1b; JZS-7G-51端子排延…

git bash查看远程仓库地址

进入代码路径 git remote -vgit remote -v

MySQL执行语句 Table ‘mysql.servers‘ doesn‘t exist

执行语句报错&#xff1a; mysql> flush privileges; ERROR 1146 (42S02): Table mysql.servers doesnt exist解决&#xff1a; 进入数据库 删除servers表 mysql> use mysql Database changed mysql> drop table if exists servers; Query OK, 0 rows affected, …

IoTDB服务安装教程-单机版

文章目录 单机版&#xff08;试用&#xff09;下载地址安装环境安装JDK设置最大文件打开数为 65535 安装服务目录结构如下启动 IoTDB使用 Cli 工具IoTDB 的基本操作创建数据库查看所有数据库创建时间序列插入时间序列数据查询数据退出会话 停止 IoTDB 单机版&#xff08;试用&a…