VUE 中的 v-for 和 v-if 是否可以共存

发布时间:2024年01月17日

VUE 中的 v-for 和 v-if 是否可以共存

前言

要成功,先发疯,头脑简单往前冲!

三金四银,金九银十,多学知识,也不能埋头苦干,要成功,先发疯,头脑简单往前冲!
最近发现很多人也在问我v-for 和 v-if 的面试问题,那么下面我就个大家分析一下!

在这里插入图片描述

1、面试经


提到这个问题,很多人肯定会脱口而出:
	
 1. Vue2 中 不可以
 2. Vue3 中 可以

再往深问,可能少部分人会回答出:

1. Vue2 中 v-for 优先级比 v-if2. Vue3 中 v-if 优先级比 v-for

但是其实很多人都是背的,具体为啥会这样,很多人都没搞清楚,稍微再往深一问,95%的人就回答不出来了~

分析Vue2:

在项目中使用 v-for 和 v-if 共存与一个标签上,Vue2 中肯定会警告我们,不建议这么做,但是为啥不建议,根本没几个人知道~

在这里插入图片描述

	可以看到在 Vue2 中,会先循环,然后在循环中去判断,判断为真则正常渲染,
	判断为假则执行 _e 函数,_e函数就是注释的意思,就是把判断为假的节点注释掉,也就是:
	1、先走 v-for 循环 32、在循环体中走 v-if 判断
	3、判断 item === 2 则正常渲染,item === 2 则把这个节点注释掉
	所以最终选出出来 13 两个节点

因为其实我们只需要渲染2个节点,但是最终还是循环了3次,造成了性能浪费,也就是 v-for 优先级高于 v-if,共存时会造成性能浪费

分析Vue3:

但是在 Vue3 中,v-for 和 v-if 却是可以共存的,为什么呢?我们还是拿最简单的代码来分析

在这里插入图片描述

可以到这个网站:**https://play.vuejs.org/**,看到解析后的代码

在这里插入图片描述
在这里插入图片描述

可以看到,跟 Vue2 不同的是,Vue3 中是先走判断,然后再走循环的,也就是:
	1、先走 v-if 判断
	2、如果 item !== 2,就去走循环也就是 v-for
	3、如果 item == 2,就执行 createCommandVNode,创建一个注释节点
	也就是在 Vue3 中,v-if 优先级是高于 v-for 的,真正循环的只有13这两个节点,
	这提高了性能!
	因为在 v-for 和 v-if 共存的时候,Vue3 会在底层帮我们转换成

在这里插入图片描述

2、正确回答

	1、首先解答完vue2和vue3后的利和弊
	2、给出如何解决这个问题的思路,如使用computed处理

3、总结


总结就是不要让 v-if 和 v-for 共存在同一个标签中,遇到这种情况需要使用 computed 去计算,然后再去渲染!

在这里插入图片描述


总结:

前端路上 | 所知甚少,唯善学。
各位小伙伴有什么疑问,欢迎留言探讨。

— 关注我:前端路上不迷路 —




文章来源:https://blog.csdn.net/weixin_44873831/article/details/135645525
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。