Fe-interview: [vue] v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

Created on 16 Jun 2019  ·  6Comments  ·  Source: haizlin/fe-interview

[vue] v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

vue
Source
picture haizhilin2013

Most helpful comment

好像是v-for,
如果同时出现应新增template来进行v-if判断, 在子元素里面使用v-for

picture wenyejie on 17 Jun 2019
👍6

All 6 comments

好像是v-for,
如果同时出现应新增template来进行v-if判断, 在子元素里面使用v-for

wenyejie picture wenyejie on 17 Jun 2019
👍6

v-for 的优先级更高
避免出现这种情况，如果实在需要，则在外嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环，避免每次只有v-if只渲染很少一部分元素，也需要遍历同级的所有元素

zejunking picture zejunking on 19 Aug 2019

v-for优先级高于v-if，故如果需要两个都存在，v-if尽量在v-for的父级被包裹，避免增加无用的渲染开销。

zhixiaotong picture zhixiaotong on 23 Sep 2019

可以使用v-show

linzhiqiang554940144 picture linzhiqiang554940144 on 22 Jun 2020

优化：在v-for之前就把数据过滤出来，如在computed里就把不需要展示的项去除掉

guckkasten-14 picture guckkasten-14 on 4 Jan 2021

当它们处于同一节点，v-for 具有比 v-if 更高的优先级。可以将v-if 置于外层元素 或 着把v-if放在