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

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

猜你喜欢