v-if和v-for优先级

约 224 字小于 1 分钟

2022-04-23

提问

vue2中 v-if 和 v-for 哪个优先级高？
当需要同时使用时，该如何进行优化？

优先级

当两个指令位于同一个DOM时，v-for 的优先级总是高于 v-if。

优化

同时使用时，由于优先级的原因，每次渲染总会先执行循环再执行 v-if, 无论如何，循环都不可避免。对于这类情况：

如果是需要控制由 v-for 执行生成元素列表的判断，可在 v-for 的外层嵌套一个 template 标签，在 template 标签上进行 v-if的判断
如果是需要控制由 v-for 执行生成的元素列表的特定子项的判断，可以先使用计算属性提前过滤不需要的项。