第35题：v-for 和 v-if 哪个优先级更高？

[DengZhaoQuan]

当 v-for 和 v-if 出现在同一级时

• 在vue 2.x 语法中

  v-for 的优先级更高，如果同时出现在同级每次渲染都会先执行循环再判断条件，由此可见对性能损耗比较大，可使用计算属性或者数组的filter方法先筛选需要的数据, 或者可以将 v-if 置于外层元素上。

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>

• 在vue 3.x语法中

  v-if 的优先级更高，因为 v-if 优先级高了，这意味着 v-if 将没有权限访问 v-for 里的变量，抛出错误

<!--
 1. 这会抛出一个错误，因为v-if先执行，属性 todo 此时还没有定义（v-for执行时才被定义）
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

<!--
 2. 解决方法：可以在外层使用 v-for ， 这也更加明显易读
-->
<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

强烈建议不要在同一级上使用 v-for 和 v-if

[YangYi-Mo]

• 在Vue2中，v-for的优先级高于v-if，因此会先进行循环，再进行条件判断
• 会造成一定的性能浪费
• 在Vue3中，v-if的优先级高于v-for，但两者不推荐同时使用，eslint会报错的