前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
老八股文了？
当我们提到 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 中肯定会警告我们，不建议这么做，但是为啥不建议，根本没几个人知道~
想要获取答案，可以打开这个网站：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 却是可以共存的，为什么呢？我们还是拿最简单的代码来分析
我们可以到这个网站：**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 去计算，然后再去渲染
结语 & 加学习群 & 摸鱼群
我是林三心
- 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
- 一个偏前端的全干工程师；
- 一个不正经的掘金作者；
- 一个逗比的B站up主；
- 一个不帅的小红书博主；
- 一个喜欢打铁的篮球菜鸟；
- 一个喜欢历史的乏味少年；
- 一个喜欢rap的五音不全弱鸡
如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点
