做网站设计师的感想,化工厂建设网站,全国建设信息网官网,网站注册理由VUE 中的 v-for 和 v-if 是否可以共存 前言1、面试经2、正确回答3、总结总结#xff1a; 前言 要成功#xff0c;先发疯#xff0c;头脑简单往前冲#xff01; 三金四银#xff0c;金九银十#xff0c;多学知识#xff0c;也不能埋头苦干#xff0c;要成功#xff0c… VUE 中的 v-for 和 v-if 是否可以共存 前言1、面试经2、正确回答3、总结总结 前言 要成功先发疯头脑简单往前冲 三金四银金九银十多学知识也不能埋头苦干要成功先发疯头脑简单往前冲 最近发现很多人也在问我v-for 和 v-if 的面试问题那么下面我就个大家分析一下 1、面试经 提到这个问题很多人肯定会脱口而出1. Vue2 中 不可以2. Vue3 中 可以再往深问可能少部分人会回答出1. Vue2 中 v-for 优先级比 v-if 高 2. Vue3 中 v-if 优先级比 v-for 高 但是其实很多人都是背的具体为啥会这样很多人都没搞清楚稍微再往深一问95%的人就回答不出来了~ 分析Vue2 在项目中使用 v-for 和 v-if 共存与一个标签上Vue2 中肯定会警告我们不建议这么做但是为啥不建议根本没几个人知道~ 可以看到在 Vue2 中会先循环然后在循环中去判断判断为真则正常渲染判断为假则执行 _e 函数_e函数就是注释的意思就是把判断为假的节点注释掉也就是1、先走 v-for 循环 3 次2、在循环体中走 v-if 判断3、判断 item 2 则正常渲染item 2 则把这个节点注释掉所以最终选出出来 1、3 两个节点因为其实我们只需要渲染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-for3、如果 item 2就执行 createCommandVNode创建一个注释节点也就是在 Vue3 中v-if 优先级是高于 v-for 的真正循环的只有1、3这两个节点这提高了性能!因为在 v-for 和 v-if 共存的时候Vue3 会在底层帮我们转换成2、正确回答 1、首先解答完vue2和vue3后的利和弊2、给出如何解决这个问题的思路如使用computed处理3、总结 总结就是不要让 v-if 和 v-for 共存在同一个标签中遇到这种情况需要使用 computed 去计算然后再去渲染! 总结 前端路上 | 所知甚少唯善学。 各位小伙伴有什么疑问欢迎留言探讨。 — 关注我前端路上不迷路 —