v-if和v-for的优先级

␆␡␂␇

于 2021-05-04 21:16:50 发布

阅读量161

点赞数

分类专栏：前端面试题文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_49614436/article/details/116405350

版权

前端面试题专栏收录该内容

27 篇文章

订阅专栏

本文介绍了在 Vue 中如何有效地使用 v-if 和 v-for 指令以提高应用性能。建议避免在同一元素上同时使用 v-if 和 v-for，而是将 v-if 放置在容器元素上或者使用计算属性来过滤列表。通过调整模板结构，可以减少不必要的渲染，提升用户体验。

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

首先：永远不要把 v-if 和 v-for 同时用在同一个元素上。

其次：当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级

1.过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

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


换成：

<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
    })
  }
}

2.避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上。

将:
<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>