v-for指令用于循环渲染一个列表 ， v-if用于根据条件动态地渲染元素
这两个指令都是vue中最为常见的指令，但是他们不可以放在一起使用，原因是 v-for的优先级高于 v-if
举个例子就是：
<template>
<div class="home">
<h1>This is a Home Page</h1>
<h4 v-for="(item,index) in list" :key="index" v-if="show === true">{{item}}</h4>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: "HomePage",
setup(){
const list = [1,2,3,4,5,6]
const show = true
return {
list,
show
}
}
}
</script>我们这么写的本意，其实是想做到，如果 show为false，我们不展示列表。如果show为true，我们循环渲染list列表。
但如果将v-for和v-if放在一起，其实等价于 依次渲染了6个div，每一个里面都添加了v-if判断
//等价于下面的形式
<h4 v-if="show === true">1</h4>
<h4 v-if="show === true">2</h4>
<h4 v-if="show === true">3</h4>
<h4 v-if="show === true">4</h4>
<h4 v-if="show === true">5</h4>
<h4 v-if="show === true">6</h4>也就是在每一次的循环中，都会进行v-if的判断，这个是非常耗费性能的，大量的判断会极大降低项目质量，所以vue官方在风格指南中极为不推荐甚至不让你放在一起写
但是实际开发中，一定会遇到这种类似场景的，就是 要根据条件来进行循环渲染，这种要怎么解决呢？
方法一：
在v-if不依赖于v-for的前提下，直接将v-if移到外层，既然v-for的优先级高于v-if，那我将v-if放到最外层首先进行判断不就可以了嘛
<template>
<div class="home">
<h1>This is a Home Page</h1>
<div v-if="show === true">
<h4 v-for="(item,index) in list" :key="index">{{item}}</h4>
</div>
</div>
</template>方法二：
在上面的例子中， v-if是靠data数据里的show变量来控制是否展示的，即并不依赖于v-for的某个值。
那假如，我需要根据v-for的index值（或item值）来控制是否展示呢？
即，v-if的判断条件需要依赖于v-for的某个值（item，index）
<template>
<div class="home">
<h1>This is a Home Page</h1>
<h4 v-for="(item,index) in list_filter" :key="index">{{item}}</h4>
</div>
</template>
<script>
import { computed } from 'vue'
export default {
name: "HomePage",
setup(){
const list = [1,2,3,4,5,6]
const list_filter = computed(() => list.filter((item,index) => item !== 5))
return {
list,
list_filter
}
}
}
</script>对于这种情况，我们可以把list替换为一个计算属性 list_filter，让其返回一个过滤后的列表
好处是：
1、过滤后的列表
只会在 list 数组发生相关变化时才被重新运算，过滤更高效。
2、解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。