vue2-v-if和v-for的优先级是什么?

news/2025/4/1 6:19:35/

1、v-if和v-for的区别
在这里插入图片描述
作用:
v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回true值的时候被渲染。
v-for指令基于一个数组来渲染一个列表,v-for指令需要使用item in items 形式的特殊语法,其中,items是源数据数组或者对象,而item则是被迭代的数组元素的别名。
在v-for的时候,建议设置key值,并且保证每一个key值是独一无二的,这便于diff算法进行优化。
用法上:
在这里插入图片描述
优先级:
v-if与v-for都是vue模板中的命令
在vue编译的时候,会将指令系统转化成可执行的render函数。
示例:编写一个p标签,同时使用v-if与v-for
在这里插入图片描述
创建vue实例,存放isShow与items数据
在这里插入图片描述
模板指令的代码都会生成在render函数中,通过挨app.$options.render就能得到渲染函数
在这里插入图片描述
_l是vue的列表渲染函数,函数内部都会进行一次if判断

初步得到结论:v-for优先级比v-if高

再将v-for和v-if置于不同的标签
在这里插入图片描述
再输出下render函数,在这里插入图片描述
这时候我们看到,v-for与v-if作用在不同的标签的时候,是先进行判断,再进行列表的渲染。
vue中的源码位置在\vue-dev\src\complier\codegen\index.js

在这里插入图片描述
在进行if判断的时候,v-for是比v-if先进行判断的。
结论:v-for的优先级比v-if优先级要高

注意事项:
1、永远不要把v-if和v-for同时用在同一个元素上,以免带来性能的浪费(每次渲染都会先循环再进行条件判断)
2、如果避免出现这种情况,则在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环。
在这里插入图片描述
3、如果条件出现在循环内部,可通过计算属性computed提前过滤掉那些不需要显示的项。
在这里插入图片描述


http://www.ppmy.cn/news/1009601.html

相关文章

七、封装(1)

本章概要 包的概念 代码组织创建独一无二的包名冲突定制工具库使用 import 改变行为使用包的忠告 访问控制(Access control)(或者_隐藏实现(implementation hiding)_)与“最初的实现不恰当”有关。 所有优…

Matlab实现支持向量机算法(附上多个完整仿真源码)

支持向量机是一种常见的机器学习算法,它可以用于分类和回归问题。在Matlab中使用支持向量机,可以方便地构建和训练模型,并进行预测和评估。本文将介绍Matlab支持向量机的基本原理以及一个简单的分类案例。 文章目录 1. 支持向量机的基本原理2…

clickhouse断电重启故障解决方案

业务场景 公司的一个日志系统用到了clickhouse。一线运维反映说有个生产环境因为异常断电造成服务器重启。在执行日志系统的启动脚本时,一直报clickhouse启动不起来,日志系统无法使用。 问题排查 通过阅读启动脚本代码,以及启动日志系统&a…

文本词向量嵌入方法对比

文本词向量嵌入方法对比 文章目录 文本词向量嵌入方法对比一、文本表示和各词向量间的对比1、文本表示哪些方法?2、怎么从语言模型理解词向量?怎么理解分布式假设?分布式假设 3、传统的词向量有什么问题?怎么解决?各种…

黑马大数据学习笔记4-Hive部署和基本操作

目录 思考规划安装MySQL数据库修改root用户密码配置Hadoop下载解压Hive提供MySQL Driver包配置Hive初始化元数据库启动Hive(使用Hadoop用户)Hive体验HiveServer2HiveServer2服务启动 Beeline p48、51、52 https://www.bilibili.com/video/BV1WY4y197g7/?…

分布式通信:发布订阅介绍

什么是发布订阅 消息的发送者称为发布者(Publisher),消息的接收者称为订阅者(Subscriber); 发布订阅(Publish-Subscribe)是一种常用的分布式通信模式; 它基于消息传递实…

【CSS3】CSS3 2D 转换 - scale 缩放 ① ( 使用 scale 设置缩放 | 使用 scale 设置缩放 与 直接设置盒子模型大小 对比 )

文章目录 一、使用 scale 设置缩放二、使用 scale 设置缩放 与 直接设置盒子模型大小 对比三、代码示例1、代码示例 - 设置两个参数代表宽高缩放2、代码示例 - 设置 1 个参数代表宽高缩放 一、使用 scale 设置缩放 在 CSS3 中的 2D 转换 中 , 可以使用 scale 样式 , 设置 盒子模…

我的创作5周年纪念日

机缘 CSDN在 SEO 方面做得很好。所以容易接触到。 然后就尝试使用了。没想到已经5年了。 收获 写blog其实是对知识的总结,能让自己更好的分享交流,让自己能和其他技术者一起交流迭代,并且把技术内容不断做好,让更多人通过技术…