仅加载Vue组件数据一次：手风琴折叠引发AJAX重复加载问题求助

这个问题我之前也碰到过，本质是vue-strap的<panel>组件在折叠时默认会通过v-if销毁内部的子组件实例，导致每次展开面板都会重新创建子组件，触发beforeMount钩子重新执行AJAX请求。哪怕你判断了数据长度，也因为组件实例被销毁，内部的cycles数据跟着清空了，所以每次展开还是会重新加载。给你几个实用的解决方案：

方案一：把数据移到父组件管理（推荐） #

把AJAX请求放在父组件中执行，只加载一次，然后通过props把数据传给子组件。这样不管子组件被销毁还是重建，数据都保存在父组件里，不用重复请求。

父组件代码示例：

<template>
  <accordion :one-at-a-time="true" type="info">
    <panel title="Cycle List">
      <!-- 把父组件的cycles传给子组件 -->
      <cycle-list :cycles="cycles"></cycle-list>
    </panel>
  </accordion>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      cycles: []
    }
  },
  mounted() {
    // 只在父组件初始化时加载一次数据
    if (this.cycles.length === 0) {
      axios.get('/api/your-cycle-url')
        .then(res => {
          this.cycles = res.data
        })
        .catch(err => {
          console.error('加载数据失败:', err)
        })
    }
  }
}
</script>

子组件（cycle-list）代码：

<template>
  <div class="cycle-item" v-for="cycle in cycles" :key="cycle.id">
    {{ cycle.name }} <!-- 直接渲染父组件传来的数据 -->
  </div>
</template>

<script>
export default {
  props: {
    cycles: {
      type: Array,
      default: () => []
    }
  }
}
</script>

方案二：给<panel>设置固定key，让Vue复用组件 #

给手风琴的面板设置一个唯一的key，Vue会识别这个key并复用组件实例，而不是销毁重建。这样组件的状态和数据会被保留，折叠再展开也不会清空数据。

<template>
  <accordion :one-at-a-time="true" type="info">
    <!-- 给panel设置固定key，确保Vue复用该组件 -->
    <panel title="Cycle List" key="cycle-panel">
      <cycle-list></cycle-list>
    </panel>
  </accordion>
</template>

方案三：用<keep-alive>缓存子组件 #

如果必须在子组件内部管理数据，可以用Vue的<keep-alive>标签包裹子组件，这样即使面板被销毁，子组件实例也会被缓存起来，下次展开时直接激活缓存的实例，数据不会丢失。

<template>
  <accordion :one-at-a-time="true" type="info">
    <panel title="Cycle List">
      <keep-alive>
        <cycle-list></cycle-list>
      </keep-alive>
    </panel>
  </accordion>
</template>

这三个方案里，方案一最符合Vue的组件设计思路，把数据和视图分离，父组件负责数据管理，子组件专注于渲染，也更容易维护。

内容的提问来源于stack exchange，提问作者eComEvo