第 37 题: v-for v-if 为什么不推荐同时使用？

[cjfff]

请用自己的理解说出（不理解的请先查阅资料）

[Htongbing]

v-for会先于v-if执行，会先遍历生成所有节点，再逐个判断显示隐藏。 所以推荐先对数据做一层过滤，再遍历过滤之后的数据生成节点。

[cjfff]

Vue 在处理我们的指令的时候 v-for 比 v-if 优先级更高

一般有两种情况下我们会有 v-for v-if 一起使用的倾向

情况 1

当要筛选出列表中符合条件的元素的时候

<ul>
  <li
    v-for="todo in todoList"
    v-if="todo.status === 'complete'"
    :key="todo.name">
    {{todo.anme}}
  </li>
</ul>

这么做会导致每次循环的同时还会去判断一次... 如果其中一个元素改变了，那么循环又得重头执行一遍

推荐使用计算属性优化

computed: {
  completeTodo() {
    return this.todoList.filter(({ status }) => status === 'complete')
  }
}

<ul>
  <li
    v-for="todo in completeTodo"
    :key="todo.name">
    {{todo.anme}}
  </li>
</ul>

情况 2

有时候我们要进行判断是否显示一个列表

<ul>
  <li
     v-for="todo in todoList"
     v-if="shouldShowTodoList"
     :key="todo.name">
     {{todo.anme}}
  </li>
</ul>

这种时候，其实我们只需要在根节点上判断一次即可，无需在列表中每次循环都执行一次判断语句...

改造如下

<ul v-if="shouldShowTodoList">
  <li
     v-for="todo in todoList"
     :key="todo.name">
     {{todo.anme}}
  </li>
</ul>

参考官方文档