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>
相关推荐
2分钟速写快排6 小时前
孔乙己的茴字有多少种写法?|AI 对话实时通信的三种实现
前端·javascript·github
Penge6668 小时前
JavaScript:BOM 详解
前端
梯度下降者8 小时前
Nuxt框架
vue.js·服务端渲染·全栈开发·混合渲染·nuxt框架
Penge6668 小时前
Vite vs Webpack:前端构建工具原理与实战
前端
Penge6668 小时前
前端包管理工具:npm、Yarn、pnpm 快速入门
前端
Penge6669 小时前
Sass 了解
前端
Penge6669 小时前
Webpack 打包从 0 到 1 实战笔记
前端
Penge6669 小时前
Webpack 入门:是什么、为什么需要、怎么使用?
前端
Penge6669 小时前
Ant Design(Antd)了解
前端
wangruofeng10 小时前
同一行代码,百种渲染:Asuka、React Native 与 Flutter 跨平台渲染机制深度拆解
前端·github