vue中v-if和v-for哪个优先级高？，vue，v-if，v-for

1.结论

实践中不管是vue2或者vue3都不应该把v-if和v-for放在一起使用。

2.细节

vue2中v-for的优先级是高于v-if的，放在一起，会先执行循环在判断条件，并且如果值渲染列表中一小部分元素，也得再每次重渲染的时候遍历整个列表，比较浪费资源。

vue3中v-if的优先级是高于v-for的，所以v-if执行时，它调用相应的变量如果不存在，就会导致异常

3.那些场景可能出现

案例一：根据某个属性来过滤列表中的项目（如：v-for="item in users" v-if="item.isActive"）。如果在vue3中因为v-if优先级是高于v-for的，假如isActive不存在就会报错。

如何解决：定义一个计算属性，让其返回过滤后的列表再来循环即可。

案列二：为了避免渲染本应该被隐藏的列表（如：v-for="item in users" v-if="isShow"）。在vue3中因为v-if优先级是高于v-for的，看似能实现功能。在vue2中因为v-for优先级是高于的v-if，所以先循环结束后再来判断，假如判断不显示会浪费资源，而且实践中不管是vue2或者vue3都不应该把v-if和v-for放在一起使用。

如何解决：把v-if写在上一级元素，或者外面包一层template把v-if写在这上面。

4.总结

文档中明确指出永远不要把v-if和v-for同时放在同一个元素上。在源码里面关于代码生成的部分，就能够清晰的看到是先处理v-if还是v-for，vue2中v-for的优先级是高于v-if的，vue3中v-if的优先级是高于v-for的。