点赞翻10倍:v-for和v-if为啥不共存?回去等消息吧!答成这鬼样!

大家好,我是宝哥

最近我做了一个统计爬虫,专门统计公众号上前端开发号主发表文章的数据,后面可能会多多分享一些热门文章给你们。喜欢的话记得关注我,有哪些喜欢的前端号主也可以推荐给我。

今天分享一个老八股文Vue面试题,作者讲的很清楚。喜欢本文记得文末点赞告诉我。

爬虫数据:阅读:4214 在看:7 点赞: 41 评论: 0 all:48

2453ae45eba1ec9209517ae09fd0cc99.png

老八股文了?

当我们提到 Vue 的面试题时,不免总会提到一个问题:v-for 和 v-if 可以共存吗?

提到这个问题,很多人肯定会脱口而出:

  • Vue2 中 不可以

  • Vue3 中 可以

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

  • Vue2 中 v-for 优先级比 v-if 高

  • Vue3 中 v-if 优先级比 v-for 高

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

重新认识两者优先级~

我带大家来重新认识这两者的优先级吧,我会分成 Vue2 和 Vue3 的版本来讲

Vue2

我就拿一个最简单的代码来说,我把 v-for 和 v-if 共存与一个标签上,Vue2 中肯定会警告我们,不建议这么做,但是为啥不建议,根本没几个人知道~

ee6d325a736e4dc6baa9ed7a2c9a2be7.png

想要获取答案,可以打开这个网站:https://v2.template-explorer.vuejs.org/

这是一个解析 Vue2 代码的网站,能把 Vue 代码解析成最终的产物代码

56da759c8741e0ff88e2a98348ca43c4.png

其实重要的部分在这里

55ebc7385ebff24647b5837cd3e3e2a3.png

可以看到在 Vue2 中,会先循环,然后在循环中去判断,判断为真则正常渲染,判断为假则执行 _e 函数,_e函数就是注释的意思,就是把判断为假的节点注释掉,也就是:

  • 1、先走 v-for 循环 3 次

  • 2、在循环体中走 v-if 判断

  • 3、判断 item !== 2 则正常渲染,item === 2 则把这个节点注释掉

所以最终选出出来 1、3 两个节点

大家能理解为什么 Vue2 会警告你了吗?因为其实我们只需要渲染2个节点,但是最终还是循环了3次,造成了性能浪费,也就是 v-for 优先级高于 v-if,共存时会造成性能浪费

Vue3

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

d3197b4cbea4c4754f1808c5d8a8deae.png

我们可以到这个网站:**https://play.vuejs.org/**,看到解析后的产物

4fffd5e0917e3a8cb459d2e755487db1.png

重要部分在这里

68c0d9281b3f70c412134c271d0ab763.png

可以看到,跟 Vue2 不同的是,Vue3 中是先走判断,然后再走循环的,也就是:

  • 1、先走 v-if 判断

  • 2、如果 item !== 2,就去走循环也就是 v-for

  • 3、如果 item == 2,就执行 createCommandVNode,创建一个注释节点

也就是在 Vue3 中,v-if 优先级是高于 v-for 的,真正循环的只有1、3这两个节点,这提高了性能

但是我们会看到,代码会报错:** item 找不到**?

9989ee069a17e0aeeb68c0df11c7351a.png

这是因为在 v-for 和 v-if 共存的时候,Vue3 会在底层帮我们转换成

737e081e059f3c3aa6c6e50ed9a64241.png

不信我们可以看看转换后的产物,跟刚刚是一模一样的!!!

fa793132706ce68244bf6e3910faf9b9.png

item是在外层的,所以报错说item 找不到,大家都知道为啥了吧?在外层怎么能获取到 item 呢?

总结

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

54bd58c9b2529df672742a3bdc24bc60.png

关注宝哥

关注下方「前端开发博客」,回复 “加群”

加入我们一起学习,天天进步

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF

  • 回复「Vue脑图」获取 Vue 相关脑图

  • 回复「思维图」获取 JavaScript 相关思维图

  • 回复「简历」获取简历制作建议

  • 回复「简历模板」获取精选的简历模板

  • 回复「加群」进入500人前端精英群

  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。

  • 回复「知识点」下载高清JavaScript知识点图谱

  • 回复「读书」下载成长、创作相关电子书

如果觉得还不错,欢迎点赞、收藏、转发❤❤

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值