v-if和v-for哪个优先级更高?

v-if和v-for哪个优先级更高?

结论:

vue2输出的渲染函数是先执行循环,在看条件判断,如果将v-if和v-for写在一个标签内,哪怕只渲染列表中的一小部分,也要重新遍历整个列表,无形造成资源浪费。vue3中则相反,v-if优先级高于v-for,所以两者写在一个标签内,如果v-if使用了v-for循环出来的变量,则会有变量不存在的异常。

场景:

1、过滤列表中的项目。

2、避免渲染本应该被隐藏的列表。

解决:

1、通过compute返回过滤后的列表

2、外面包一层template分开v-for和v-if

源码:

vue2

在这里插入图片描述

v2:https://github1s.com/vuejs/vue/blob/HEAD/src/compiler/codegen/index.js#L65-L66

vue3

在这里插入图片描述

v3:https://github1s.com/vuejs/core/blob/HEAD/packages/compiler-core/src/codegen.ts#L586-L587

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

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

相关文章

DolphinDB 与盈米基金达成战略合作,打造领先的资管机构投顾解决方案

1月16日上午,DolphinDB 与盈米基金在上海签署战略合作协议,共同开启专业资管投顾投研合作新篇章。 DolphinDB 联合创始人、COO 初阳春与盈米基金副总裁、研究院院长杨媛春出席仪式,并代表双方完成签约。 打造市场领先的资管机构投顾服务 盈…

浅析Redis①:命令处理核心源码分析(上)

写在前面 Redis作为我们日常工作中最常使用的缓存数据库,其重要性不言而喻,作为普调开发者,我们在日常开发中使用Redis,主要聚焦于Redis的基层数据结构的命令使用,很少会有人对Redis的内部实现机制进行了解&#xff0c…

vscode设置terminal的最大行数

今天跑代码出现一个问题,就是整个程序跑完,整个程序的输出信息过多,最开始输出的信息已经被vscode的缓存冲掉了,只能看到最后的一部分,具体的原因是vscode的terminal默认只能保存1000行的信息,所以如果想保…

《WebKit 技术内幕》之四(1): 资源加载和网络栈

第四章 资源加载和网络栈 使用网络栈来下载网页和网页资源是渲染引擎工作的第一步 1.WebKit 资源加载机制 1.1 资源 网页本身就是一种资源、网页还需要依赖很多其他的资源(图片、视频) (1)HTML 支持的资源主要包括以下几种类型: HTML 页…

Elasticsearch 数据类型相关总结:快速参考指南【记录】

在Elasticsearch中,有多种数据类型可用于定义字段。 在开始了解数据类型之前,首先要知道,在Elasticsearch中,分词处理主要针对文本字段,而对于其他类型字段(如数值、日期、布尔等),通…

周五的胡思乱想

众所周知 csdn 在程序员的心目中是比较逊色的, 因为博客水平的参差不齐, 大部分人也都是用来作为自己的笔记方便未来复制。这样就导致这里的文章都是点到为止,没有去深究问题的根本原因,大家也都是复制一下解决方案就关闭的页面。或许这就是 csdn 的价值…

视频直播新时代,低延时直播交互,Web,Android,WebRtc推流拉流测试

直播现在已经深入了生活,学习,工作和娱乐方方面面,由于前些年的技术所限,传统rtmp,flv,m3u8 技术让直播快速启动项目产品,但也有很多不足,特别的交互式直播,一直是其中的痛点,延时较…

Oracle学习笔记——基础一起学 14

第十四天 DECODE的简单例子 用case实现 --DECODE的简单例子 --用case实现 select id,name, case sex when 1 then 男 when 2 then 女 end 性别 from student; --DECODE取出一行内两列中的较大值 --先建表 create table sales(month char(2),sales_tv number,sales_…

C#MQTT编程07--MQTT服务器和客户端(wpf版)

1、前言 上篇完成了winform版的mqtt服务器和客户端,实现了订阅和发布,效果666,长这样 这节要做的wpf版,长这样,效果也是帅BBBB帅,wpf技术是cs程序软件的福音。 wpf的基础知识和案例项目可以看我的另一个专…

Parade Series - RTSP - Web

Cron Startup Scripts └─ lt-init.cmd├─ lt-server.cmd│ └─ lt-rtsp-proxy-server.cmd│ └─ lt-rtsp-proxy-agent.cmd└─ lt-push.cmd└─ lt-rtsp-cam-daemon.cmd└─ lt-rtsp-cam-worker.cmdlt-init.cmd :: :: PLEASE DO NOT EDIT THIS FILE :: ECHO OFF…

Qt —— 编译Qt5版本QFTP库,并实现连接服务、获取列表、上传、下载、删除文件等操作(附源码、附基于Qt5编译好的QFTP库)

示例效果1 示例效果2 介绍 QFTP是Qt4的库,Qt5改用了QNetworkAccessManager来代替。但是Qt5提供的QNetworkAccessManager仅支持FTP的上传和下载,所以只能将QFTP库编译为Qt5的库来进行调用。 QFTP在Github的下载地址:https://github.com/qt/qtftp 客户端源码生成的release结果…

IDEA项目启动报错之Command too long

使用IDEA最新的版本2023-3月份社区版本,启动之前没问题的项目突然报错如下: Error running VipServiceApplication: Error running // VipServiceApplication.Command line is too long. Shorten the command line via // JAR manifest or via a // clas…

运放【之噪声】

电流噪声和电压噪声 我们一般评估噪声,还看对输出端噪声电压的贡献,因为电流乘以电阻等于电压,因此,最终的噪声大小还跟电路中电阻的取值有很大关系。显然,电阻越大,那么噪声电压就越大。反之电阻越小&…

设计模式——建造者模式(Builder Pattern)

概述 建造者模式是较为复杂的创建型模式,它将客户端与包含多个组成部分(或部件)的复杂对象的创建过程分离,客户端无须知道复杂对象的内部组成部分与装配方式,只需要知道所需建造者的类型即可。它关注如何一步一步创建一…

09 STM32 - PWM

9.1 PWM简介 脉冲宽度调制(Pulse Width Modulation,简称PWM),是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术。简单一点,就是对脉冲宽度的控制。 9.2 PWM波原理 如下图所示,使用定时器定时,从0开始&#x…

Ubuntu系统Git的安装配置及使用笔记(更新中)

Ubuntu下Git的下载及配置 (1)、下载git 打开终端命令窗口,输入:sudo apt-get install git 提示:sudo命令是用来以其他身份来执行命令,预设的身份为root,使用sudo时必须先输入密码 (2)、可以使用命令git --version查看git的版本号 (3)、设置…

项目中常用的ahoos

项目中常用的ahoos如下 useMount、useUnmountuseRequestuseBooleanuseInfiniteScrolluseLocalStorageStateuseInViewportuseUpdateEffectuseLayoutEffectuseMapuseThrottleFnuseDebounceFn

Java内置锁:深度解析StampedLock并发类

内容摘要 StampedLock类是一种高性能的读写锁,它通过引入乐观读和写锁的优化机制,提高了多线程环境下的并发性能,他支持三种访问模式:悲观读、写和乐观读,可以根据不同的业务场景选择适合的锁策略,相比传统…

Qt/QML编程之路:OpenGL的示例(39)

Qt编程之后,会发现有版本问题,有时候一个示例不同的版本下可能会跑不同,有些Qt5跑不同Qt6已经完善,可以跑通。 我就看到有个关于OpenGL的示例: 这个示例是演示怎么基于OpenGL编程的,但是调试时却发现glViewXXX等gl打头的函数说找不到reference,或者什么link不上之类的错…

FindMy技术与游戏手柄结合

游戏手柄作为游戏的重要配件,它极大地提升了玩家的游戏体验,推动了游戏市场的不断扩大。游戏手柄的触摸感应技术为游戏开发者提供了更多的创意空间,也为硬件制造商带来了新的商机。游戏手柄的个性化定制也为玩家社区的发展提供了动力&#xf…