v-for下v-if重复执行 uni-app

v-for下v-if重复执行 uni-app

产品分类：

uniapp/小程序/微信

PC开发环境操作系统：

Windows

HBuilderX类型：

正式

HBuilderX版本号：

4.87

第三方开发者工具版本号：

稳定版 Stable Build (1.06.2412050)

基础库版本号：

3.7.10

项目创建方式：

HBuilderX

示例代码：

<template v-for="(item, index) in 1" :key="index">
<view v-if="ifShow('v-if', item, index)">{{ item }}</view>
<view v-show="ifShow('v-show', item, index)">{{ item }}</view>
</template>  

function ifShow(type: string, item: number, index: string): boolean {
console.log('ifShow', type, item, index);
return false;
}

操作步骤：

如代码实例操作

预期结果：

console.log('ifShow', type, item, index);v-if执行一次

实际结果：

console.log('ifShow', type, item, index);v-if执行二次

bug描述：

v-for下v-if会被重复执行

image


更多关于v-for下v-if重复执行 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

item 是 0 跟 1 吧，是执行 2 次啊

更多关于v-for下v-if重复执行 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html


item是1,v-for="(item, index) in 1" 循环只执行一次才对，index也只打印了0，实际ifShow方法被执行了两次。换成v-show，ifShow就只执行一次

在uni-app中，v-for和v-if同时使用时，v-if确实可能被多次执行，这是Vue框架的预期行为，而非bug。

当v-for和v-if作用于同一节点时，Vue会先执行v-for循环，然后对每个循环项执行v-if判断。在您的示例中，虽然循环只有1次，但Vue的响应式系统会在初始渲染和后续更新时触发重新计算。

具体原因：

  1. 响应式依赖追踪：ifShow函数中可能访问了响应式数据，当这些数据变化时，会触发重新计算
  2. 渲染优化策略：Vue会在不同阶段重新评估条件渲染
  3. 开发环境检查：开发模式下会有额外的检查调用

解决方案：

  1. 使用计算属性：将v-if的条件提前计算
<template v-for="(item, index) in list" :key="index">
  <view v-if="shouldShow(item, index)">{{ item }}</view>
</template>

computed: {
  shouldShow() {
    return this.list.map((item, index) => {
      // 计算逻辑
      return condition;
    });
  }
}
  1. 过滤数据源：在数据层面先过滤
computed: {
  filteredList() {
    return this.originalList.filter(item => condition);
  }
}
回到顶部