Vue中v-for不要和v-if一起使用

前端小马

已于 2023-10-30 16:30:57 修改

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签：前端 javascript html vue.js

于 2023-01-11 18:20:48 首次发布

本文链接：https://blog.csdn.net/qq_56088882/article/details/128648767

前端笔记专栏收录该内容

44 篇文章

订阅专栏

在Vue2中，v-for和v-if一起使用可能导致性能问题，因为v-for有更高优先级，会多次运行v-if。建议使用计算属性处理过滤逻辑，提高效率。Vue3中v-if优先级高于v-for，需注意变量作用域。解决方案包括使用计算属性和在外层使用v-if。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue2中v-for和v-if一起使用时会报错：

The 'xxx' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'

原因：

Vue2中当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中

一般出现两个情况的时候，我们可能需要会将v-for和v-if同时使用：

一：选择性地渲染列表，例如根据某个特定属性来决定是否渲染

<ul>
  <li v-for="user in users"  v-if="user.isActive"  :key="user.id">
    {{ user.name }}
  </li>
</ul>
这样就算只渲染出一小部分用户的元素，也得在每次重新渲染的时候遍历整个列表

这种情况使用计算属性computed：

<ul>
  <li  v-for="user in activeUsers"  :key="user.id">
    {{ user.name }}
  </li>
</ul>

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

这样我们将会获得如下好处：

过滤后的列表只会在 users 数组发生相关变化时才被重新运算，过滤更高效。

使用 v-for="user in activeUsers" 之后，我们在渲染的时候只遍历符合条件的用户，渲染更高效。

解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。

二.避免渲染本应该被隐藏的列表

<ul>
  <li v-for="user in users"  v-if="shouldShowUsers"  :key="user.id">
    {{ user.name }}
  </li>
</ul>

更新为

<ul v-if="shouldShowUsers">
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
  </li>
</ul>

这样我们将会获得如下好处：

通过将 v-if 移动到容器元素，我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是，我们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for。

在Vue3中v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

---参考于Vue官网