为什么vue中的v-if和v-for不能一起使用

一.v-if和v-for的作用

• v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
• v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名，v-for在使用的时候，要设置key的值，并且这个值是独一无二的，方便diff算法进行优化

二.两者的优先级

在使用的时候v-for的优先级高于v-if

三.注意问题

永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
如何避免出现这种情况，将v-if移动到上一层容器，在这一层进行v-if判断，然后在内部进行v-for循环

<template>
  <ul v-if="isShow">
    <li v-for="item in list" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    };
  },
};
</script>

<style>
</style>

如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项，因为v-for的优先级高于v-if，每一次都要遍历数组，造成不必要的计算，影响性能，比如我们需要在页面中遍历10个li标签，但是只需要显示index=5的li标签内容，其余全部隐藏

<template>
  <ul>
    <li v-for="item in activeList" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    };
  },
  computed: {
    activeList() {
      return this.list.filter((item, index) => index == 5);
    },
  },
};
</script>

<style>
</style>

用计算属性进行处理后，它只会返回一个满足条件的数组，这样在遍历的时候，我们只需要遍历这个返回的新数组，性能方面得到很好的提升。