电脑基础 · 2023年3月25日

Vue中v-for不能与v-if一起写的原因

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、解耦渲染层的逻辑,可维护性 (对逻辑的更改和扩展) 更强。