vue为什么避免v-if和v-for，非要在一起使用怎么办

Vue 避免同时使用 v-if 和 v-for 是因为这样会影响性能。当 v-if 和 v-for 同时存在时，v-for 先会被执行，然后才会考虑 v-if 的条件。如果列表很长，这样会导致不必要的计算，影响渲染性能。

如果非要在一起使用，可以考虑使用计算属性来优化性能。计算属性可以先根据条件筛选出需要渲染的数据，然后再使用 v-for 渲染。这样可以避免不必要的计算和渲染，提高性能。

例如：

<template>
  <div>
    <div v-for="item in filteredList" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple', show: true },
        { id: 2, name: 'Banana', show: false },
        { id: 3, name: 'Orange', show: true },
        { id: 4, name: 'Grape', show: false }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.show)
    }
  }
}
</script>

在上面的例子中，我们使用 computed 属性 filteredList 先根据 show 条件筛选出需要渲染的数据，然后再使用 v-for 渲染。这样可以避免不必要的计算和渲染，提高性能。