vue中v-for和v-if为什么不建议在一起使用？

v-for的优先级高于v-if，如果将两则放在一块，会先执行v-for循环出列表，再使用v-if去判断每一个项是否显示，容易造成性能的浪费；

<template>
  <div class="hello">
    <div v-for="item in arr" :key="item.id" v-if="item.isShow">
      <h3>{
    
    {
    
     item.name }}</h3>
    </div>
  </div>
</template>

<script>
export default {
    
    
  name: 'HelloWorld',
  data() {
    
    
    return {
    
    
      arr: [
        {
    
    id: 1, name: "张三", isShow: true},
        {
    
    id: 2, name: "李四", isShow: false},
        {
    
    id: 3, name: "王五", isShow: false},
        {
    
    id: 4, name: "赵六", isShow: true},
      ]
    }
  }
}

所以一般结合计算属性来使用：先通过计算属性过滤数组，然后再去渲染。

<template>
  <div class="hello">
    <div v-for="item in filterArr" :key="item.id">
      <h3>{
    
    {
    
     item.name }}</h3>
    </div>
  </div>
</template>

<script>
export default {
    
    
  name: 'HelloWorld',
  data() {
    
    
    return {
    
    
      arr: [
        {
    
    id: 1, name: "张三", isShow: true},
        {
    
    id: 2, name: "李四", isShow: false},
        {
    
    id: 3, name: "王五", isShow: false},
        {
    
    id: 4, name: "赵六", isShow: true},
      ]
    }
  },
  computed: {
    
    
  //通过计算属性过滤数组
    filterArr() {
    
    
      return this.arr.filter(item => {
    
    
        return item.isShow
      })
    }
  }
}
</script>