v-if和v-for哪个优先级更高？

要不要买菜啊

已于 2022-08-09 14:16:33 修改

阅读量365

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-06-28 14:16:10 首次发布

原文链接：https://github.com/57code/vue-interview/blob/master/public/01-vif-vfor/README.md#%E6%80%9D%E8%B7%AF%E5%88%86%E6%9E%90%E6%80%BB%E5%88%86%E6%80%BB%E6%A8%A1%E5%BC%8F

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文分析了Vue2和Vue3中v-if与v-for的执行顺序差异，指出在Vue3中v-if优先级高于v-for。实践上，将v-if和v-for结合使用会导致不必要的性能开销，应避免在同一元素上同时使用。推荐通过计算属性或调整结构来优化。文档强烈建议遵循这一最佳实践。

摘要由CSDN通过智能技术生成

此题考查常识，文档中曾有详细说明v2|v3；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者应用能力。

思路分析：总分总模式

先给出结论
为什么是这样的
它们能放一起吗
如果不能，那应该怎样
总结

回答范例：

在 Vue 2 中，v-for 优先于 v-if 被解析；但在 Vue 3 中，则完全相反，v-if 的优先级高于 v-for。
我曾经做过实验，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件
实践中也不应该把它们放一起，因为哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表。
通常有两种情况下导致我们这样做：
- 为了过滤列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。此时定义一个计算属性 (比如 activeUsers)，让其返回过滤后的列表即可。
- 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。此时把 v-if 移动至容器元素上 (比如 ul、ol)即可。
文档中明确指出永远不要把 v-if 和 v-for 同时用在同一个元素上，显然这是一个重要的注意事项。
看过源码里面关于代码生成的部分，

知其所以然：

Vue 2

为了过滤列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。此时定义一个计算属性 (比如 activeUsers)，让其返回过滤后的列表即可

//  反例1
<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>

为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。此时把 v-if 移动至容器元素上 (比如 ul、ol)即可。

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

// 正解

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