为什么Vue中的v-if和v-for不建议一起用?

面试官：请你说一下Vue中v-if和v-for的优先级谁更高吧？如果两个在同一个标签上出现，会出现什么问题嘛？怎么解决这个问题呢？

我：......（好像会，但是具体不太知道咋说）。

老实说，咋一听到这个题，如果自己没有试验过感觉还真容易说错，就像是会进入一个“思维误区”，就会理所当然的想如果这两个指令同时出现一个标签那是不是应该先if判断是否存在才会去渲染for的循环结构？但实际是这样吗？接下来我们就通过案例和源码文件的查看来彻底解决这个常见的面试题。

---

一、v-if 和 v-for的使用

 v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。

 v-for

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名。

在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

v-if & v-for的使用

<Modal v-if="isShow" />

<ul>
  <li v-for="item in items" :key="item.id">
    {
  { item.label }}
  </li>
</ul>

---

二、v-if 和 v-for的优先级

<