为什么 v-if 和 v-for 不建议一起用

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值时被渲染。
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名。

在使用 v-for 的时候，建议设置 key 值，并且保证每个 key 值是独一无二的，这便于 diff 算法进行优化。

v-if 与 v-for 都是 vue 模板系统中的指令。在 vue 模板编译的时候，会将指令系统转化成可执行的 render 函数。

<div id="app">
  <p v-if="isShow" v-for="item in items">
    {{ item.title }}
  </p>
</div>

每次 for 循环内部都会进行一次 if 判断。

初步结论：for 优先级比 if 高。

<div id="app">
  <template v-if="isShow">
    <p v-for="item in items">{{ item.title }}</p>
  </template>
</div>

for 与 if 作用域不同标签时，是先进行判断，再进行列表的渲染。进行 if 判断的时候，v-for 是比 v-if 先进行判断（先循环再条件判断）。

最终结论：v-for 的优先级比 v-if 高（Vue 2.x）。

注：Vue 3.x 中 v-if 的优先级高于 v-for。

把 v-if 提到外层容器上：

<template v-if="isShow">
  <p v-for="item in items">{{ item.title }}</p>
</template>

如果条件出现在循环内部，可通过计算属性 computed 提前过滤掉那些不需要显示的项：

computed: {
  items() {
    return this.list.filter(item => item.isShow)
  }
}

来源整理自：vue3js.cn 面试官系列

相关文章