父子组件单向数据流

在商品列表的父子组件中出现了两段代码：

ProductTable.vue（子组件）——computed 的 paginationConfig 里：

// 输入: 父组件通过 props 传入 (单向数据流, 只读)
const props = defineProps<{
  products: Product[]
  loading: boolean
  page: number
  total: number
}>()

// 通过 emit 来对应 @page-change 事件，向父组件传递数据
const emit = defineEmits(['page-change'])

const paginationConfig = computed(() => ({
  current: props.page,
  pageSize: PAGE_SIZE,
  total: props.total,

  // onChange这个名字 是 Pagination 分页组件约定好的 key，不能随便改
  onChange: (newPage: number) => emit('page-change', newPage),
}))


复制代码

ProductList.vue（父组件）：

function handlePageChange(newPage: number) {
  page.value = newPage  // 触发 watch 重新加载
}
复制代码

Vue是 先渲染、后填数据

 ProductList.vue                    ProductTable.vue               a-table
┌──────────────────┐  :products   ┌──────────────────┐ products  ┌──────────┐
│ products = ref() │ ──────────→  │ props.products   │ ────────→ │dataSource│
│ page = ref(1)    │ ──────────→  │ props.page       │           │          │
│ total = ref(0)   │ ──────────→  │ props.total      │           │          │
│ loading = ref()  │ ──────────→  │ props.loading    │  loading  │ loading  │
└──────────────────┘              └──────────────────┘           └──────────┘
        ↑                                  ↑
        │                                  │
    直接绑定refs                   computed 从 props 读取
   (响应式自动同步)                 再包装成 a-table 需要的格式
复制代码

const paginationConfig = computed(() => ({
  current: props.page,       // 从父组件 props 读取
  pageSize: PAGE_SIZE,
  total: props.total,        // 从父组件 props 读取
  onChange: (newPage) => emit('page-change', newPage),  // 点击时向上 emit
}))
复制代码

这和渲染流程方向相反, 事件从最内层向上传播，数据变化从最外层向下传播。

        用户点击 a-pagination 的"第2页"按钮
                    │
                    ▼
┌──────────── a-pagination (Ant Design 内部) ───────────┐
│       检测到 click 事件                                │
│       → 调用 paginationConfig.onChange(2)             │
│      （这个 onChange 是通过 :pagination prop 传进来的）  │
└────────────────────┬─────────────────────────────────┘
                     │
                     ▼
┌──────────── ProductTable.vue ────────────────────────┐
│  paginationConfig.onChange(2） 执行                   │
│  → emit('page-change', 2)                            │
│  （这是 ProductTable 向父组件发出的自定义事件)            │
└────────────────────┬─────────────────────────────────┘
                     │
                     ▼
┌──────────── ProductList.vue ─────────────────────────┐
│  @page-change="handlePageChange" 接收到事件）          │
│  → handlePageChange(2） 执行                          │
│  → page.value = 2                                    │
│  （page 是 ref，赋值触发 Vue 响应式系统)                 │
└────────────────────┬─────────────────────────────────┘
                     │
                     ▼
         ┌─── Vue 响应式系统介入 ─────┐
         │  watch 检测到 page 变了   │
         │  → 自动调用 load（）      │
         └────────────┬────────────┘
                      │
                      ▼
         load({ keyword, category, page: 2 })
                      │
                      ▼
            getProducts(params)  ← 异步请求
                      │
                      ▼
              300ms 后返回第2页数据
                      │
                      ▼
         products.value = data.list  ← 更新 ref
         total.value = data.total    ← 更新 ref
                      │
                      ▼
         ┌─── Vue 响应式系统再次介入 ──────┐
         │  (检测到 products 变了）       │
         │  -> 通知所有依赖它的组件重新渲染  │
         └────────────┬─────────────────┘
                      │
                      ▼
┌───────────── ProductTable.vue ─────────────────────┐
│  props.products 更新 → computed 重新计算             │
│  → a-table 收到新的 dataSource 和 paginationConfig   │
│  → 重新渲染表格和分页按钮（高亮第2页）                   │
└────────────────────────────────────────────────────┘
复制代码

onBeforeMount   ←  还没渲染 DOM，ref 值已就绪
    │
onMounted       ←  DOM 已渲染完毕，此时 watch({ immediate: true }) 刚触发 load()
    │               ⚠️  注意：load() 是 async 的，此时数据还没回来！
    │               ⚠️  所以第一次渲染时 a-table 收到的是空数组
    │
    ▼  (300ms 后数据返回)
    │
    products.value = data.list  ← Vue 响应式触发 re-render
    │
    ▼
更新后的 DOM 显示商品列表
复制代码

这就是为什么你看到的是"先出现 loading 或空表格，然后数据才填充进来"——这不是 bug，是 Vue + 异步数据的标准行为。