v-if和v-for的优先级

02_v-if和v-for的优先级

思路分析：

1.先给出结论

2.为什么是这样的，说出细节

3.哪些场景可能导致我们这样做，该怎么处理

4.总结，拔高

结论

在vue2中，v-for的优先级高于v-if；在vue3中，v-if的优先级高于v-for。在vue中，永远不要把v-if和v-for同时用在同一个元素上，会带来性能方面的浪费（每次渲染都会先循环再进行条件判断）；想要避免出现这种情况，可在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环。在vue3中，v-if的优先级高于v-fo，所以v-if执行时，它调用的变量还不存在，就会导致异常

为什么

看源码，因为在vue2中是先处理v-for的，然后再处理v-if。而vue3则相反。反正别人是这么说的，我也看不懂源码T.T

哪些场景可能会导致我们这么做

为了过滤列表中的项目的时候、或者为了避免渲染而隐藏列表的时候