vue中使用for循环子组件渲染7次导致接口调用7次

缓存数据:在父组件中进行接口调用,并将获取到的数据缓存起来。然后在子组件中使用缓存的数据进行渲染,而不是每次都调用接口。您可以使用Vue的provide/inject功能或者Vuex来实现数据的共享和缓存。

使用异步组件:将子组件定义为异步组件,这样它们只会在第一次渲染时才会被加载和实例化。在后续的渲染中,它们会直接复用之前已经加载的实例,从而避免了重复调用接口。

使用条件渲染:在父组件中使用条件渲染来控制子组件的显示与隐藏。只有当需要显示某个子组件时,才进行接口调用并将数据传递给该子组件。这样可以避免不必要的接口调用。

使用条件渲染确认可行

cpp 复制代码
 <view
          class="w-100s item-stock"
          v-for="itemStock in dataList"
          :key="itemStock.productId"
        >
          <product-show :data="itemStock">
          </product-show>
          <stock-battery
            v-if="activeArrowId === itemStock.productId"
            :objectBattery="objectBattery"
          ></stock-battery>
        </view>
相关推荐
量化分析码农3 分钟前
股票历史数据的复权参数对照:多级别返回的字段与数值差异
java·javascript·后端
亿元程序员1 小时前
太牛了!这AI做出来的游戏,居然还能变现!
前端
hellice2 小时前
闪传 FlashDrop 实战:我用 300 行 Node 代码做了个「4 位取件码」临时文件中转站
前端·产品
用户0829773260052 小时前
RTX 5500 MIG 踩坑记录:切分之后模型跑不起来,排错整整一下午
前端
Lank_M2 小时前
AI 放大后的图更清楚,但它不能当原图入库
前端
Swot2 小时前
SvelteKit 数据流研究:`+page.js` 和 `+page.server.js` 到底谁在跑,数据又去了哪儿
前端·后端
用户4147679304152 小时前
Windows 触摸屏上 Swiper 轮播滑不动?可能是内部滚动容器抢走了你的手势
前端
张明君644512 小时前
从一个 Referer 引发的 403,到 SSR 服务失稳:Astro 流式渲染与缓存失效分析
前端
律宏阔2 小时前
微信小程序 + Taro + TDesign 去掉 [&&&],让普通 Tailwind 类接管局部样式
前端·微信小程序·taro
费曼学习法2 小时前
把 3 个内部服务封装成 MCP Server 的工程复盘:进程模型、超时与错误契约
前端