[vue] v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

[haizhilin2013]

[vue] v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

[wenyejie]

好像是v-for,
如果同时出现应新增template来进行v-if判断, 在子元素里面使用v-for

[zejunking]

v-for 的优先级更高
避免出现这种情况，如果实在需要，则在外嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环，避免每次只有v-if只渲染很少一部分元素，也需要遍历同级的所有元素

[yorisona]

可以使用v-show

[qq-radio]

优化：在v-for之前就把数据过滤出来，如在computed里就把不需要展示的项去除掉

[crush2020]

当它们处于同一节点，v-for 具有比 v-if 更高的优先级。可以将v-if 置于外层元素 或 着把v-if放在上包裹着v-for。

[xiqi99520]

首先，关于v-if和v-for的优先级，可以在源码compiler/codegen/index.js中找到genElement方法，里面的if else判断，可以清楚看到for的判断在if判断之上，由此，可证明v-for的优先级高于v-if

如果v-if和v-for同时出现，分两种情况：
1、当同时出现在同一标签内，例如：

{{item}}

，可以通过vue.$options.render打印出渲染函数，可以清晰的看到会优先执行for循环，再执行if判断
2、当v-if出现在父级中，子级有v-for，此时再打印vue.$options.render，会发现会优先执行if判断。

若想优化，提升性能，v-if需要优先执行，可以在v-for外层加一层template搭配v-if使用。
若是v-if与v-for必须出现在同一层或v-if为v-for的子级的情况下，优化的方式可以将for循环的数组提前通过计算属性处理，尽量减少过多渲染导致的性能消耗。

[Good-XiaAo]

可以使用v-show

牛逼啊

[yxllovewq]

v-if和v-for的优先级：v-for > v-if
因此同时出现，会导致先for循环子元素，在判断每个子元素的if情况。
想要先执行if，在满足的条件下再循环子元素，可以在v-for的元素外层加一个有if指令的template标签

[sc950828]

在vue2中v-for优先级高
在vue3中v-if优先级高

[Cai-zhiji]

优先级

v-for 拥有比 v-if 更高的优先级。这意味着，当 v-if 和 v-for 同时出现在同一个元素上时，v-for 将先被解析和执行，然后在每个循环项上应用 v-if。

优化性能：

当列表较大且动态变化时，为了提高性能，应尽量避免在同一个元素上同时使用 v-if 和 v-for。这是因为每次循环都会执行 v-if 条件判断，导致性能下降。
可以考虑将 v-if 放在外层容器元素上，以减少 v-if 的条件判断次数。这样，只有满足条件的项才会进行循环渲染。
或者，可以对数据进行预处理，先筛选出符合条件的数据，然后再将处理后的数据传递给 v-for 进行循环渲染，避免在模板中频繁使用 v-if 进行条件判断。

<template>
  <div>
    <div v-if="shouldRender">
      <div v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', visible: true },
        { id: 2, name: 'Item 2', visible: false },
        { id: 3, name: 'Item 3', visible: true }
      ]
    };
  },
  computed: {
    shouldRender() {
      // 根据条件判断是否需要渲染列表
      return this.items.some(item => item.visible);
    },
    filteredItems() {
      // 进行数据预处理，筛选出满足条件的数据
      return this.items.filter(item => item.visible);
    }
  }
};
</script>

在上述示例中，通过将 v-if 放在外层容器元素上，并在 computed 属性中对数据进行预处理，可以减少 v-if 的条件判断次数，提高性能。

总结来说，当 v-if 和 v-for 同时出现时，应优先考虑减少 v-if 的条件判断次数，将其放在外层容器元素上。另外，对数据进行预处理或筛选，可以避免在模板中频繁使用 v-if 进行条件判断，提高性能。