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

大家好，我是宝哥

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

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

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

老八股文了？

当我们提到 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 中肯定会警告我们，不建议这么做，但是为啥不建议，根本没几个人知道~

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

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

其实重要的部分在这里

可以看到在 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 却是可以共存的，为什么呢？我们还是拿最简单的代码来分析

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

重要部分在这里

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

• 1、先走 v-if 判断

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

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

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

但是我们会看到，代码会报错：** item 找不到**？

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

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

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

总结

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

关注宝哥

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

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

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

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

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

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

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

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

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

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

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

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