深度解析为什么v-if和v-for不能同时使用

v-if和v-for不能同时的原因: v-for的执行优先比v-if要高

举个例子

<template><div class="hello"><div  v-for="(item,index) in list" v-if="index === 9" :key="item" ></div></div>
</template><script>
export default {name: "IndexCom",data(){return {list:[1,2,3,4,5,6,7,8,9,10]   //需要遍历的数据}}
};
</script><style scoped>
</style>

上面这组代码和下面这组是等价的

<template><div class="hello"><div v-if="0 === 10"></div>   //第1次判断<div v-if="1 === 10"></div>   //第2次判断<div v-if="2 === 10"></div>   //第3次判断<div v-if="3 === 10"></div>   //第4次判断<div v-if="4 === 10"></div>   //第5次判断<div v-if="5 === 10"></div>   //第6次判断<div v-if="6 === 10"></div>   //第7次判断<div v-if="7 === 10"></div>   //第8次判断<div v-if="8 === 10"></div>   //第9次判断<div v-if="9 === 10"></div>   //第10次判断</div>
</template><script>
export default {name: "IndexCom",data() {return {list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],};},
};
</script><style scoped>
</style>

以上面这组list为例子。我们会发现。循环了10次的数据，每一次，都需要进行v-if的判断。循环10次，判断10次，如果需要循环1000次呢，那也需要判断1000次。而v-if的判断相对的比较耗费性能。大量的判断会极大的降低项目质量。

优化的几种方法

方法一

在v-if不依赖v-for的前提下，我们可以将v-if写在v-for的外层，这样就可以让v-if判断优先

还是以上面的代码片段为例子↓

<template><div class="hello"><!-- v-if写在v-for的外层 这样就可以让v-if的优先级大于v-for，就不用去判断很多次 --><div  v-if="x === 1">   、<div  v-for="(item) in list" :key="item" ></div></div></div>
</template><script>
export default {name: "IndexCom",data(){return {list:[1,2,3,4,5,6,7,8,9,10]}}
};
</script><style scoped>
</style>

方法二

当v-if的判断条件依赖于v-for的某个值时(item,index)，我们则可以使用如下方法

<template><div class="hello"><!-- 2. 然后这里去循环已经被过滤的属性 --><div  v-for="(item) in ListArr" :key="item" ></div></div>
</template><script>
export default {name: "IndexCom",data(){return {list:[1,2,3,4,5,6,7,8,9,10]}},computed:{//1. 在computed里先做好判断，这里过滤的成本远比v-if的成本低ListArr(){return this.list.filter((_,index) => index === 1)}}
};
</script><style scoped>
</style>

总结

v-if不能和v-for一起使用的原因是v-for的优先级比v-if高，一起使用会造成性能浪费
解决方案有两种，把v-if放在v-for的外层或者把需要v-for的属性先从计算属性中过滤一次
v-if和v-for的优先级问题在vue3中不需要考虑，vue3更新了v-if和v-for的优先级，使v-if的优先级高于v-for

深度解析为什么v-if和v-for不能同时使用相关推荐

深度解析HashMap高频面试及底层实现架构！
深度解析HashMap高频面试及底层实现架构! HashMap高频面试题 1,Map接口和List接口是什么关系? 2.Map有哪些常用的实现类? 3.请阐述HashMap的put过程? 4.链表中是 ...
语言中拟合函数计算aic_Go语言函数深度解析(中)
上回函数深度解析给大家聊了一些函数的基本知识,不知道还有没有人记得,不记得赶紧回去复习! 他们是 go语言中函数的基本原理单/多个同/不同类型参数单/多个同/不同类型返回值值传递,引用传递函数 ...
语音视频社交背后技术深度解析
演讲 / 蒋宁波整理 / LiveVideoStack 伴随智能硬件设备快速发展和网络条件提升,实时语音视频的应用越来越广泛,从互动直播.到休闲游戏.再到陌生人社交,而如何保障实时互动过程流畅不卡顿 ...
go float64 转int_深挖Go函数之深度解析(下)：可变参数
接连两篇函数专题深度解析,相信大家已经对函数的语法有了深入的了解. 函数简单使用和基本知识解析匿名函数和闭包这次给大家带来了一个函数的特性[可变参数],作为函数专题的结束. 有没有发现? 我们有时 ...
sprintf函数_三分钟学 Go 语言——函数深度解析(下) 可变参数
接连两篇函数专题深度解析,相信大家已经对函数的语法有了深入的了解. 函数简单使用和基本知识解析匿名函数和闭包五一放假期间,我懂得,估计你们都不想学习. 小熊这两天因为个人种种令人难受的原因,没有能 ...
以两种异步模型应用案例，深度解析Future接口
摘要:本文以实际案例的形式分析了两种异步模型,并从源码角度深度解析Future接口和FutureTask类. 本文分享自华为云社区<[精通高并发系列]两种异步模型与深度解析Future接口(一) ...
深度解析HashMap底层实现架构
摘要:分析Map接口的详细使用以及HashMap的底层是如何实现的? 本文分享自华为云社区<[图文并茂]深度解析HashMap高频面试及底层实现结构![奔跑吧!JAVA]>,原文作者:灰小 ...
yolov3损失函数改进_YOLO V3 深度解析（下）
1. 前言距离上次YOLO V3深度解析(上) ,隔了很久了,其实自己忙着自己的论文+专利+学习任务,在写文章这块也是有点懈怠了,但是事儿不能做一半就结束了(也有小伙伴催更了),所以接着对YOLO ...
ConcurrentHashMap源码深度解析（一）（java8）——不可不知的基本概念（助你拿下源码事半功倍）
文章目录一.前言二.基本定义 1.基本常量 2.基本属性三.构造器优化 1.ConcurrentHashMap(int initialCapacity, float loadFactor, in ...
深度解析ConcurrentHashMap
深度解析ConcurrentHashMap 前言 HashMap是平时开发过程中用的比较多的集合,但它是非线程安全的,在涉及到多线程并发的情况,执行get方法有可能会引起循环遍历(前提是其它线 ...

深度解析为什么v-if和v-for不能同时使用

v-if和v-for不能同时的原因: v-for的执行优先比v-if要高

优化的几种方法

方法一

方法二

总结

深度解析为什么v-if和v-for不能同时使用相关推荐

最新文章

热门文章