首先，在vue官网中是不建议v-for和v-if连用

• 在Vue 2中，v-for的优先级比v-if高，因此在连用的时候会先进行v-for将所有元素渲染到页面上之后，再进行v-if判断删除元素，这样会导致性能的浪费（每次先渲染元素再进行判断删除）
  官网上给了一个例子，可以简单理解一下。在这个例子中会先将用户进行遍历渲染(v-for)，再去判断用户是否为活跃用于（v-if）。在这里只需要活跃用户渲染，但是由于v-for的优先级更高，因此无论是否为活跃用户都会渲染，这样会造成资源的浪费。

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

• 在Vue 3中，v-if的优先级比v-for高
  看看官网上给的例子，给一个用户列表，遍历活跃用户（user.isActive为true）。

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

Will throw an error, because the v-if directive will be evaluated first and the iteration variable user does not exist at this moment.（将抛出一个错误，因为v-if指令将首先求值，并且迭代变量user此时不存在。）

由官网给的解释可以看出，直接将v-if和v-for连用可能会出现报错，因此不建议在同一节点中连用。