Nuxt 3问题：父组件更新prop值后子组件未更新

核心问题拆解 #

1. 父组件响应式丢失：funds和pageData用reactive声明，但直接赋值funds = res.fundsList会切断原响应式引用，Vue无法追踪新数组/对象的变化。
2. 子组件未传递数据：AppTable里的VueTableLite没接收data属性，就算父组件数据更新，表格也拿不到新值。
3. 子组件未监听数据变化：初始化时的console.log只会执行一次，不会在prop更新时触发。

具体修复步骤 #

1. 修复父组件响应式赋值 #

不要直接替换reactive变量，而是修改其内部值：

// 初始化时替换直接赋值
funds.splice(0, funds.length, ...data.value!.fundsList);
Object.assign(pageData, data.value!.pagination);

// updateFundList函数里的修复
const updateFundList = async ({riskLevels, category, amcId}: Partial<FundFilterReq>) => {
  navigateTo({
    path: route.path,
    query: {
      riskLevels,
      amcId, category
    }
  });

  const res = await getMFsByFilter({riskLevels, category, amcId});
  // 数组：清空原数组并插入新数据
  funds.splice(0, funds.length, ...res.fundsList);
  // 对象：合并新属性到原响应式对象
  Object.assign(pageData, res.pagination);
};

2. 子组件传递数据给表格组件 #

修改AppTable.vue的模板，将props传递给VueTableLite：

<template>
  <VueTableLite :data="data" :config="config"></VueTableLite>
</template>

3. 子组件监听数据变化（可选调试用） #

如果需要在子组件里监控数据更新，添加watch监听：

import { watch } from 'vue';

watch(data, (newData) => {
  console.log('updated funds', newData);
}, { deep: true }); // 数组/对象深层变化需要开启deep

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