Vue--v-if和v-for不能同时使用--原因/解决方案/实例

末蓝、 2023-10-01 13:17 13阅读 0赞

原文网址：[Vue--v-if和v-for不能同时使用--原因/解决方案/实例\_IT利刃出鞘的博客-CSDN博客][Vue--v-if_v-for_--_IT_-CSDN]

## 简介 ##

**简介**

本文介绍v-if和v-for不要同时使用的原因及解决方案。

**官网**

[条件渲染 — Vue.js][_ Vue.js]

[风格指南 — Vue.js][_ Vue.js 1]

## 原因与解决方案 ##

**说明**

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

vue官方着重强调：永远不要把 v-if 和 v-for 同时用在同一个元素上。

**v-if和v-for不能同时使用的原因**

v-for比v-if优先级高，每一次都需要遍历整个数组，造成不必要的计算，影响性能。即使100个list中只需要使用一个数据，也会循环整个数组。

**解决方案**

场景1：每项都有自己的状态

例：v-for="user in users" v-if="user.isActive"。将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

场景2：有公共的状态

例：v-for="user in users" v-if="shouldShowUsers"。将 v-if 移动至外部容器元素上 (比如 ul、ol)。

## 示例1：每项都有自己的状态 ##

公共代码

路由（router/index.js）

import Vue from 'vue'
    import Router from 'vue-router'
    import Demo from "../views/Demo";
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/demo',
          name: 'Demo',
          component: Demo,
        }
      ],
    })

### 反例 ###

**代码**

Demo.vue

<template>
      <div class="hello">
        <ul>
          <li
              v-for="user in users"
              v-if="user.isActive"
              :key="user.userId"
          >
            {
       {user.userName}}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data () {
        return {
          users: [
            {
              userId: 1,
              userName: 'Tony1',
              isActive: true
            },
            {
              userId: 2,
              userName: 'Tony2',
              isActive: false
            },
            {
              userId: 3,
              userName: 'Tony3',
              isActive: true
            }
          ]
        }
      },
    
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

访问：[http://localhost:8080/\#/demo][http_localhost_8080_demo]

![29f8c6f46d4e460fabf6478b1729fd4f.png][]

**总结**

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以上述模板会进行如下运算：

this.users.map(function (user) {
      if (user.isActive) {
        return user.name
      }
    })

因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表。

### 好例子 ###

**代码**

Demo.vue

<template>
      <div class="hello">
        <ul>
          <li
              v-for="user in activeUsers"
              :key="user.userId"
          >
            {
       {user.userName}}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data () {
        return {
          users: [
            {
              userId: 1,
              userName: 'Tony1',
              isActive: true
            },
            {
              userId: 2,
              userName: 'Tony2',
              isActive: false
            },
            {
              userId: 3,
              userName: 'Tony3',
              isActive: true
            }
          ]
        }
      },
      computed: {
        activeUsers() {
          return this.users.filter(function (user) {
            return user.isActive;
          })
        }
      }
    
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

访问：[http://localhost:8080/\#/demo][http_localhost_8080_demo]

![7d6c6bd3a3554bf1be6cdfbb60ff5aa3.png][]

## 示例2：有公共的状态 ##

公共代码

路由（router/index.js）

### 反例 ###

**代码**

Demo.vue

<template>
      <div class="hello">
        <ul>
          <li
              v-for="user in users"
              v-if="userActive"
              :key="user.userId"
          >
            {
       {user.userName}}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data () {
        return {
          userActive: true,
          users: [
            {
              userId: 1,
              userName: 'Tony1',
            },
            {
              userId: 2,
              userName: 'Tony2',
            },
            {
              userId: 3,
              userName: 'Tony3',
            }
          ]
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

访问：[http://localhost:8080/\#/demo][http_localhost_8080_demo]

![fccd4ea31cce482da9f3e7fe71d1c4db.png][]

### 好例子 ###

**代码**

Demo.vue

<template>
      <div class="hello">
        <ul v-if="userActive">
          <li
              v-for="user in users"
              :key="user.userId"
          >
            {
       {user.userName}}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data () {
        return {
          userActive: true,
          users: [
            {
              userId: 1,
              userName: 'Tony1',
            },
            {
              userId: 2,
              userName: 'Tony2',
            },
            {
              userId: 3,
              userName: 'Tony3',
            }
          ]
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

访问：[http://localhost:8080/\#/demo][http_localhost_8080_demo]

![1c73e9a2717147fe9e5367788f0c35f9.png][]

[Vue--v-if_v-for_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122530801
[_ Vue.js]: https://cn.vuejs.org/v2/guide/conditional.html#v-if-%E4%B8%8E-v-for-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8
[_ Vue.js 1]: https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81
[http_localhost_8080_demo]: http://localhost:8080/#/demo
[29f8c6f46d4e460fabf6478b1729fd4f.png]: https://img-blog.csdnimg.cn/29f8c6f46d4e460fabf6478b1729fd4f.png
[7d6c6bd3a3554bf1be6cdfbb60ff5aa3.png]: https://img-blog.csdnimg.cn/7d6c6bd3a3554bf1be6cdfbb60ff5aa3.png
[fccd4ea31cce482da9f3e7fe71d1c4db.png]: https://img-blog.csdnimg.cn/fccd4ea31cce482da9f3e7fe71d1c4db.png
[1c73e9a2717147fe9e5367788f0c35f9.png]: https://img-blog.csdnimg.cn/1c73e9a2717147fe9e5367788f0c35f9.png