Vue.js点击按钮刷新组件与v-data-table表格失效的解决方案

方案1：数据驱动刷新（优先推荐，性能最好） #

Vue本身是响应式数据驱动的框架，绝大多数刷新场景不需要强制重载组件，只要重新拉取组件绑定的数据源，视图会自动完成更新，没有组件重建的闪烁开销。
操作步骤：

• 把页面初始化时获取stats（状态栏数据）、displayed（表格数据）的逻辑抽成独立的可复用方法：

// 写入组件的methods配置项
async fetchPageData() {
  this.loading = true
  try {
    // 替换成你项目里实际的接口请求逻辑
    const [statsRes, listRes] = await Promise.all([
      // 获取状态栏数据的请求
      getSiteStats(),
      // 获取表格列表数据的请求
      getSiteList()
    ])
    this.stats = statsRes.data
    this.displayed = listRes.data
    // 需要重置的搜索、分页等页面状态也可以在这里统一重置，比如 this.search = ''
  } catch (e) {
    console.error('数据加载失败', e)
  } finally {
    this.loading = false
  }
},
// 页面首次加载时调用一次拉取数据
mounted() {
  this.fetchPageData()
}

• 给刷新按钮绑定的refreshList方法直接调用该数据获取方法即可：

refreshList() {
  this.fetchPageData()
}

方案2：需要完全重置组件内部状态时，用正确的key绑定实现强制重载 #

如果statusBar、数据表格或者表格内的cardConnector组件维护了未对外暴露的内部状态（比如内部选中、折叠、临时缓存状态），仅更新数据无法重置时，再使用修改key强制重建组件的方案。之前用key不生效，基本都是绑定位置错误、key值不是响应式变量导致的。
操作步骤：

• 在组件的data配置项中新增响应式的刷新标识：

data() {
  return {
    // 你原有的数据变量保持不变，比如headers、search、loading、stats、displayed等
    refreshKey: 0
  }
}

• 给需要重载的组件绑定这个key，注意key要直接绑在需要重建的组件本身或者它的直接父容器上，不要绑定过高层级的节点避免整页刷新：

<!-- 状态栏区域 -->
<v-row dense>
  <v-col cols="12" :key="`status-bar-${refreshKey}`">
    <statusBar :stat="stats" mode="site"/>
  </v-col>
</v-row>

<!-- 数据表格区域 -->
<v-col cols="8" :key="`data-table-${refreshKey}`">
  <v-data-table
    :headers="headers"
    :items="displayed"
    :search="search"
    :loading="loading"
    style="background-color: #292B3D;"
    @click:row="openDetail">
    <template v-slot:[`item.status`]="{ item }">
      <v-chip
        v-if="naming[item.status].color == '#FFFFFF'"
        class="ma-2"
        text-color="black"
        :color="naming[item.status].color">
        {{ naming[item.status].lib }}
      </v-chip>
      <v-chip
        v-else
        class="ma-2"
        :color="naming[item.status].color">
        {{ naming[item.status].lib }}
      </v-chip>
    </template>

    <template v-slot:[`item.connectors`]="{ item }">
      <cardConnector :data="item.connectors"></cardConnector>
    </template>
  </v-data-table>
</v-col>

• 修改refreshList方法，更新key值的同时重新拉取最新数据：

async refreshList() {
  // 更新key触发对应组件销毁、重建，重置所有内部状态
  this.refreshKey++
  // 拉取最新数据填充到重建后的组件
  await this.fetchPageData()
}

之前方法无效的原因说明 #

• $forceUpdate仅会强制触发当前组件实例的重渲染，既不会更新子组件的内部状态，也不会自动重新拉取接口数据，仅适合修改了非响应式变量需要触发视图更新的场景，完全不适配当前需求。
• key修改方案无效，基本是两个原因：一是key绑定在了静态节点或者远高于目标组件的父节点上，没有触发目标组件的重建；二是key值不是响应式变量，修改后Vue没有检测到变化。

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