v-for 和 v-if 可以一起使用吗？

最新推荐文章于 2024-02-09 00:00:00 发布

半个苹果

最新推荐文章于 2024-02-09 00:00:00 发布

阅读量1.2k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44629215/article/details/119014437

版权

博客讨论了在 Vue 中同时使用 v-for 和 v-if 的潜在性能问题。由于 v-for 优先级高于 v-if，这种组合会导致不必要的计算。为了解决这个问题，提出了两种解决方案：一是利用 computed 属性封装判断逻辑，二是将 v-if 放到循环元素的父元素或使用 template 包裹 v-for。这两种方法都能有效提高渲染效率。

摘要由CSDN通过智能技术生成

v-for 和 v-if 可以一起使用吗？

  不建议一起使用。

因为v-for比v-if的优先级高，所以使用的话，每次v-for都会执行v-if造成不必要的计算，影响性能，尤其是在当需要渲染很小一部分的时候。即使有100个user中只有一个需要使用v-if，也需要整个循环数组，这在性能上是极大的浪费。
那难道就没有更好的解决办法，回答：当然是有解决方法的；我们可以使用computed
computed：单独的去封装一个函数，然后判断，返回；
第二种就是将v-if放到循环列表的元素的父元素中，或者使用template将v-for渲染的元素包起来，再在template上使用v-if。