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>
相关推荐
总要学点什么20 分钟前
第98篇:三维特效-材质线效果——给一条线换十种材质,虚线的图案只填了一半
开发语言·前端·javascript·ecmascript·gis·webgl·材质
10share31 分钟前
基于大模型的 i18n 方案:把中文原文当 Key,轻松搞定多语言维护
前端·vue.js
OpsEye1 小时前
混合云 AI 架构,如何统一做敏感内容拦截?
javascript·ai编程
Funlang3 小时前
给机器写的 JavaScript 造个笼子
开发语言·javascript·ecmascript
古茗前端团队3 小时前
由 key 引发的思考
前端·javascript·react.js
kyriewen3 小时前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员
鹏多多3 小时前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
火山引擎开发者社区3 小时前
构建专属的飞书群开发助手,AgentKit Studio 一键部署 DeepSeek Harness Super-Agent
前端
啾咪orJIUMI6 小时前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
掘金者阿豪6 小时前
AI数据库不只是向量检索:从数据语义到库内智能计算的技术演进
前端