vue知识点: v-if和v-for为何不能同时使用?

在vue2和vue3的官方文档里都写到不推荐 v-if和v-for同时使用,如下代码所示:

<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.text }}
</li>

一、vue3文档:列表渲染 | Vue.js

在vue3中,是因为当它们同时存在于一个节点上时,v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。 v-if里是无法访问到todo的,这将会报错。

二、vue2文档:列表渲染 — Vue.js

在vue2中,v-for 的优先级比 v-if 更高,也就是说在v-if中可以访问到v-for作用域内定义的变量别名 ,因此不会跟vue3一样报错,但并不推荐这么做,原因如下:

  1. 性能问题:将 v-for 和 v-if 放在同一个元素上会导致性能下降。Vue 必须为每一个在 v-for 中的项目都检查 v-if 的条件,这会增加不必要的计算量。特别是当 todos 数组很大时,这种性能问题会更加明显。详见文章末尾的附录。
  2. 逻辑可读性:从逻辑和可读性的角度来看,将过滤逻辑(v-if)和渲染逻辑(v-for)混合在一起可能会导致代码难以理解和维护。最好是先过滤数据,然后再进行渲染。

推荐写法:

写法一、先过滤数据,再使用v-for

<template><ul><li v-for="todo in filteredTodos" :key="todo.id">{{ todo.text }}</li></ul>
</template><script>
export default {data() {return {todos: [{ id: 1, text: 'Learn Vue', isComplete: false },{ id: 2, text: 'Build something awesome', isComplete: true },// ... more todos]}},computed: {// 得到过滤后的数据filteredTodos() {return this.todos.filter(todo => !todo.isComplete);}}
}
</script>

写法 二:利用<template>元素,将 v-if 放在 v-for 的子元素中,而不是与 v-for 直接放在同一个元素上。(在vue2中,不推荐使用,逻辑可读性虽然没问题,但数据多时,还是可能存在性能问题;在 Vue 3 中,编译器能够识别 v-for 在 v-if 的子元素上的使用情况,并进行优化,以避免不必要的虚拟 DOM 节点的创建,可以使用该写法)

<template><ul><template v-for="todo in todos" :key="todo.id"><li v-if="!todo.isComplete">{{ todo.text}}</li></template></ul>
</template><script>
export default {data() {return {todos: [{ id: 1, text: 'Learn Vue', isComplete: false },{ id: 2, text: 'Build something awesome', isComplete: true },// ... more todos]}}
}
</script>

附录:

在 Vue 2 中,当你同时在一个元素上使用 v-for 和 v-if,Vue 的渲染逻辑实际上是这样的:

  1. v-for 优先于 v-if:首先,v-for 会为 todos 数组中的每个项目创建 DOM 节点。这意味着,它会为数组中的每个 todo 项目都创建一个 <li> 元素。

  2. v-if 随后应用:然后,Vue 会检查每个由 v-for 创建的 <li> 元素上的 v-if 条件。如果 v-if 的条件不满足(即 todo.isComplete 为 true),则该节点不会被渲染到 DOM 中。但是,这并不意味着节点被销毁,而是它们只是简单地不被添加到 DOM 树中。

  3. 节点的销毁与复用:如果 todos 数组发生变化(例如,项目被添加、删除或更改),Vue 会重新计算 v-for 和 v-if 的结果,并相应地更新 DOM。这意味着,即使 v-if 条件不满足,由 v-for 创建的节点可能仍然存在在 Vue 的虚拟 DOM 中,只是它们不会出现在实际的 DOM 树中。这些节点可以被 Vue 复用,如果它们在未来再次满足 v-if 的条件。

  4. 性能影响:即使某些节点因为 v-if 条件不满足而不会被渲染到 DOM 中,它们仍然会被 Vue 创建和追踪,这可能会对性能产生影响,尤其是当 todos 数组很大时。

  5. 最佳实践:为了获得最佳性能,你应该避免在同一元素上同时使用 v-for 和 v-if。如果可能,应该使用计算属性或方法来预先过滤数据,然后只对过滤后的结果进行 v-for 渲染。这样做可以减少不必要的节点创建和销毁,提高应用程序的性能。

因此,对于你给出的代码示例,即使 todo.isComplete 为 true,由 v-for 创建的 <li> 节点仍然会被 Vue 创建和追踪,只是它们不会出现在最终的渲染结果中。为了优化性能,你应该将过滤逻辑移至计算属性或方法中,并在 v-for 中仅渲染过滤后的数据。

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

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

相关文章

将Python程序打包为Windows安装包

本文使用创作助手。 如果你想将Python程序打包为Windows安装包&#xff0c;你可以使用NSIS&#xff08;Nullsoft Scriptable Install System&#xff09;工具。NSIS是一个免费的Windows安装包创建工具。 以下是使用NSIS将Python程序打包为Windows安装包的步骤&#xff1a; 首…

Python库使用介绍 LivermorE AI Projector for Computed Tomography LEAP

Python库使用介绍 LivermorE AI Projector for Computed Tomography LEAP 前言Projector 用于设定投影参数的类参数解释&#xff1a;其它功能load_param(str filepath)forward(ipt, project_mode"forward") 样例代码后记 前言 github开源代码 python API文档 作为一…

TypeScript-自动编译

1.生成文件 tsc --init 2.修改配置文件 说明&#xff1a;通过CTRLF搜索到以下单词&#xff0c;进行修改。 "strict": true, //是否开启严格模式 "outDir": "./outFile", //表示ts文件最终编译为js文件&#xff0c;js文件存放的位置 3.新…

pytorch中的torch.nn.Linear

torch.nn.Linear是pytorch中的线性层&#xff0c;应该是最常见的网络层了&#xff0c;官方文档&#xff1a;torch.nn.Linear。 torch.nn.Linear(in_features, out_features, biasTrue, deviceNone, dtypeNone)其中&#xff0c;in_features表示输入的维度&#xff1b;out_featu…

大模型LLM论文整理

Gemini&#xff1a;一族功能强大的多模态模 论文名称&#xff1a;Gemini: A Family of Highly Capable Multimodal Models 论文地址&#xff1a;https://arxiv.org/pdf/2312.11805 会议&#xff1a; 论文方法&#xff1a;该论文介绍了一种新的多模态模型系列&#xff0c;Gem…

C++心决之命名空间、重载函数和引用

目录 1. C关键字(C98) 2. 命名空间 2.1 命名空间定义 2.2 命名空间使用 3. C输入&输出 4. 缺省参数 4.1 缺省参数概念 4.2 缺省参数分类 5. 函数重载 5.1 函数重载概念 5.2 C支持函数重载的原理--名字修饰(name Mangling) 6. 引用 6.1 引用概念 6.2 引用特性…

代码随想录第九天: 字符串完结

语言: Java 参考资料: 代码随想录、ChatGPT3.5 28. 实现 strStr() 力扣题目链接(opens new window) 实现 strStr() 函数。 给定一个 haystack 字符串和一个 needle 字符串&#xff0c;在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始)。如果不存在&#…

问题大全——C语言及数据结构篇(自用)

目录 printf函数中那些%d %f等等的作用 运算符的优先级 选择排序 冒泡排序 快速排序 折半查找 归并排序 strcat strcpy scanf可以限制输入格式么 c语言实现链式队列&#xff0c;输入数字入队&#xff0c;输入字符出队。 统计一个范围内的素数 打印水仙花数 打印杨…

Android Q(10)黑暗模式适配的实现

一、引言 随着 AndroidQ&#xff08;10&#xff09;的发布&#xff0c;黑暗模式成为了系统级别的特性。为了满足用户在不同环境下的使用需求&#xff0c;应用程序需要及时进行黑暗模式的适配。本文将详细介绍如何在 AndroidQ&#xff08;10&#xff09;上实现黑暗模式的适配&a…

【架构篇】看完这篇,不要再说你不会性能调优了

调优方向 系统调优是一个复杂且多方面的任务&#xff0c;主要目标是提高系统的性能和效率。它可以针对不同的层面和组件进行&#xff0c;包括硬件、操作系统、网络、软件应用程序等。以下是一些常见的系统调优方面&#xff1a; 硬件优化&#xff1a; CPU性能优化&#xff1a;…

基于spark的大数据分析预测地震受灾情况的系统设计

基于spark的大数据分析预测地震受灾情况的系统设计 在本篇博客中,我们将介绍如何使用Apache Spark框架进行地震受灾情况的预测。我们将结合数据分析、特征工程、模型训练和评估等步骤,最终建立一个预测模型来预测地震造成的破坏程度,同时使用可视化大屏的方式展示数据的分布…

补代码随想录算法训练营第39天 | 62.不同路径、63. 不同路径 II

慢慢开始有点感觉了 初始化很巧妙 62.不同路径 本题大家掌握动态规划的方法就可以。 数论方法 有点非主流&#xff0c;很难想到。 代码随想录 视频讲解&#xff1a;动态规划中如何初始化很重要&#xff01;| LeetCode&#xff1a;62.不同路径_哔哩哔哩_bilibili 63. 不同路径…

DreamSim技术小结

paperhttps://arxiv.org/abs/2306.09344codehttps://github.com/ssundaram21/dreamsimorgMiT个人博客主页http://myhz0606.com/article/dream_sim 1 Motivation 目前较为成熟度量图片相似性的做法是通过模型将图片转为embedding&#xff0c;再用余弦相似度来度量相似性。虽然…

【数据分析面试】1. 计算年度收入百分比(SQL)

题目 你需要为公司的营收来源生成一份年度报告。计算截止目前为止&#xff0c;在表格中记录的第一年和最后一年所创造的总收入百分比。将百分比四舍五入到两位小数。 示例&#xff1a; 输入&#xff1a; annual_payments 表 列名类型amountINTEGERcreated_atDATETIMEstatusV…

Linux企业级别日志的查找

企业级别日志的查找 查看mysql数据库的日志错误日志&#xff08;Error Log&#xff09;查询日志&#xff08;General Query Log&#xff09;慢查询日志&#xff08;Slow Query Log&#xff09;事务日志&#xff08;Transaction Log&#xff09;二进制日志&#xff08;Binary Lo…

Thread 之start 和run 的区别

Java Thread 之start 和run 的区别 用start方法来启动线程&#xff0c;真正实现了多线程运行&#xff0c;这时无需等待run方法体代码执行完毕而直接继续执行下面的代码。通过调用Thread类的start()方法来启动一个线程&#xff0c;这时此线程处于就绪&#xff08;可运行&#x…

P1739 表达式括号匹配

题目:P1739 表达式括号匹配 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 代码&#xff1a; #include<bits/stdc.h> using namespace std; int main() {char c;stack<char> s;while(cin>>c&&c!){if(c()s.push(c);if(c)){if(!s.empty())s.pop();e…

【MATLAB源码-第23期】基于matlab的短时傅里叶STFT信号变换仿真,得到信号的时频曲线图。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 短时傅里叶变换&#xff08;Short-Time Fourier Transform&#xff0c;STFT&#xff09;是傅里叶变换的一种扩展&#xff0c;用于分析信号在时域和频域上的变化。描述如下&#xff1a; 1. **时域与频域分析**&#xff1a; …

【Chapter2】进程、线程与作业,计算机操作系统教程,第四版,左万利,王英

文章目录 [toc] 一、多道程序设计1.1单道程序设计的缺点1.2多道程序设计的提出1.3多道程序设计存在的问题 二、进程的引入2.1进程的概念2.2进程的组成2.2.1进程控制块2.2.2程序 2.3进程的类型及特征2.3.1进程的类型2.3.2进程的特征 2.4进程的状态及转换2.4.1进程的状态创建态就…

【对比golang和java的区别】

&#x1f308;个人主页:程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…