为什么 v-if 与 v-for 不能同时使用

在开发中，我们可能会写出如下代码:

<!-- html模版 -->
<div id="app">
  <ul>
    <li v-for="item in list" v-if="item.age<30">
      <span>{{item.name}}</span>
      <span>{{item.age}}</span>
    </li>
  </ul>
</div>

// 列表数据
list: [
  {
    name: 'jack',
    age: 23,
  },
  {
    name: 'john',
    age: 33,
  },
  {
    name: 'petty',
    age: 20,
  },
]

这个操作看起来很简单，就是过滤要展示的列表，但是官方是不推荐这么写的，官方链接。 官方给出了两点原因：

1. 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级(vue2)
2. 哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。

我们在实际的开发中，应该尽量避免这种写法。如果要过滤数据，可以使用计算属性进行过滤，然后再丢给 vue 进行渲染，尽可能的提高性能。

提示

在 Vue3 中 v-if 比 v-for 具有更高的优先级,点击查看官网