v-if 和 v-for 优先级

一、优先级规则

在 Vue.js 中，`v-for`的优先级比`v-if`高。这意味着当它们同时出现在一个元素上时，`v-for`会首先被解析和执行。

<div v-for="item in items" v-if="shouldShow(item)">{{ item }}</div>

二、可能导致的问题

1. 性能问题

由于`v-for`会先执行，在某些情况下可能会导致不必要的循环迭代。

2. 逻辑混乱

从代码可读性角度看，`v-for`先于`v-if`执行可能会使代码逻辑不够直观。开发者可能期望先进行条件判断，再决定是否进行循环，但实际情况相反，这可能会导致代码维护和理解上的困难。

三、解决方法和最佳实践

1. 使用计算属性（推荐）

将`v-if`的条件判断移到计算属性中，这样可以先过滤掉不需要的元素，再进行`v-for`循环。

export default {data() {return {items: [1, 2, 3, 4, 5],};},computed: {filteredItems() {return this.items.filter((item) => this.shouldShow(item));},},};

然后在模板中使用

<div v-for="item in filteredItems">{{ item }}</div>

2. 使用`<template>`标签包裹

如果不想使用计算属性，也可以使用`<template>`标签来包裹`v-for`和`v-if`。

<template v-for="item in items"><div v-if="shouldShow(item)">{{ item }}</div></template>