vue2,vue3 中 v-if 和v-for 指令优先级问题

查水表小泰迪

已于 2022-02-17 17:20:37 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript

于 2022-02-17 17:19:55 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_40259123/article/details/122987548

vue 专栏收录该内容

5 篇文章

订阅专栏

文档警告在Vue2中不应将v-if与v-for同时用于同一元素，因为这会导致性能浪费，v-for优先执行。而在Vue3中，这种用法已经被禁止，会直接报错，表明v-if的优先级高于v-for。理解这两个指令的执行顺序对于优化Vue应用至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文档中明确指出永远不要把 v-if 和 v-for 同时用在同一个元素上，显然这是一个重要的注意事项

结论：

vue2: v-for 优先级高于 v-if
vue3: v-if 优先级高于 v-for

vue2

先循环再判断条件，性能浪费，并且控制台会报警告。看下源码中对指令优先级判断

vue3

已经不允许这么写了，如果这么写是会报错的，因为dom还没生成。看下源码中对指令优先级判断

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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