本技能用于 TanStack Vue Table 从 v8 迁移到 v9,定位为完整的不兼容变更检查清单。资料明确指出 v9 是当前 API,迁移不能只停留在重命名 Vue composable。
前置要求:Vue 3.2 或更高版本(vue >=3.2)。
推荐迁移顺序:将 useVueTable 替换为 useTable,同时保留响应式输入;定义显式 features,然后把 row models 和 registries 移入 tableFeatures;更新状态读取、受控所有权和渲染;应用共享 API 与类型重命名;stockFeatures 仅作为临时审计桥接,显式 features 才是生产目标。示例中通过 tableFeatures 注册 rowSortingFeature、sortedRowModel 与 sortFns,并以 ref 作为 data,再调用 useTable。
构造与功能注册:v8 的 useVueTable(options) 对应 v9 的 useTable(options);v8 全部功能捆绑,v9 需要 tableFeatures({...}) 显式声明;v8 的 getCoreRowModel() 选项删除,核心行模型自动提供;v8 的 getRowModel() 表选项对应 v9 tableFeatures 中的 createRowModel() 插槽;sortingFns 对应 sortFns 功能插槽;filterFns 与 aggregationFns 同理;顶层 onStateChange 移除,改用按切片回调、外部 atoms 或 store 订阅。资料还列出可用的 feature imports,并强调 API 受 feature gating 控制,依赖插槽必须放在同一 tableFeatures 调用中且顺序正确;聚合与分组相互独立。
行模型映射:getFilteredRowModel 对应 filteredRowModel: createFilteredRowModel(),getSortedRowModel 对应 sortedRowModel: createSortedRowModel(),getPaginationRowModel 对应 paginatedRowModel: createPaginatedRowModel(),getExpandedRowModel、getGroupedRowModel、getFacetedRowModel、getFacetedMinMaxValues、getFacetedUniqueValues 均有对应工厂插槽。工厂不接收参数。filterFns、sortFns、aggregationFns 作为同级 feature slots 注册单独导入的内置函数;完整 registry 对象仍可用但会打包所有内置项。
Vue 状态迁移:data 需传 ref 或 computed,适配器会解包并同步,不能传 data.value 快照,也支持返回 data.value 的 getter;table.getState().sorting 改为 table.atoms.sorting.get(),table.store.get() 仅用于完整快照或调试;在模板派生值中用 Vue computed 包裹 atom 读取;JSX/render 函数中 table.Subscribe 提供细粒度边界,回调需作为显式 children prop 传入;受控 refs 需要 getter-backed 状态切片和按切片回调;顶层 onStateChange 移除;外部 atoms 来自 @tanstack/vue-store,通过 atoms 提供,不能同时提供 atoms.pagination 与 state.pagination;table.baseAtoms 为内部可写状态,优先使用功能 API 或外部 atoms。
渲染与组合:FlexRender 从旧式 :render 与 :props 改为 :cell、:header、:footer 简写;重复原始选项可用 tableOptions(...) 组合;重复表约定可用 createTableHook 与预绑定 helper。旧渲染形状仍可编译,但简写是迁移目标;createTableHook 可选,面向应用级约定。
共享不兼容变更:行列实例方法位于共享 prototype 上并使用 this,不能解构、裸传或期待出现在对象展开、Object.keys、JSON 中;表方法不受影响。逻辑列固定不再有 left/right 别名,改用 start/end,涉及 columnPinning、column.pin、getIsPinned、可见单元格、头尾分组、扁平头、叶头、叶列、总尺寸、getStart/getAfter/getIndex 等方法;CSS 应使用 inset-inline-start/inset-inline-end,逻辑名称不会自动设置 DOM 方向,columnResizeDirection 不变。enablePinning 拆分为 enableColumnPinning 与 enableRowPinning;交互式缩放需 columnSizingFeature 与 columnResizingFeature,固定尺寸只需前者;columnSizingInfo 改为 columnResizing,setColumnSizingInfo 改为 setColumnResizing,onColumnSizingInfoChange 改为 onColumnResizingChange。排序与选择方面 sortingFn 改为 sortFn,sortingFns 改为 sortFns,getSortingFn 改为 getSortFn,getAutoSortingFn 改为 getAutoSortFn,SortingFn/SortingFns 改为 SortFn/SortFns,row._getAllCellsByColumnId 改为 row.getAllCellsByColumnId,其他 _ 前缀内部方法移除;getIsSomeRowsSelected 与 getIsSomePageRowsSelected 语义变为“至少一个,包含全部”,不确定 UI 还需检查 !getIsAllRowsSelected() 或 !getIsAllPageRowsSelected()。
TypeScript 迁移:类型需先加 TFeatures,例如 ColumnDef<typeof features, Person>、Table<typeof features, Person>;createColumnHelper<Person>() 改为 createColumnHelper<typeof features, Person>(),嵌套数组推断用 columnHelper.columns([...]);配置为 stockFeatures 时使用 StockFeatures;现有 TableMeta/ColumnMeta 声明合并需先加 TFeatures,推荐按表使用 metaHelper 插槽;全局 FilterFns、SortFns、AggregationFns、FilterMeta 增强改为 registry slots 与 filterMeta: metaHelper;RowData 限定为记录或数组,推荐显式对象行类型。
常见迁移失败:只重命名 composable 仍保留 v8 配置为高危;useTable 前解包 refs 为高危;裸传 prototype 方法为高危;JSX children 作为 slots 为中危。最终检查清单涵盖 useTable 替换、features 与 row models 注册、状态读取与 onStateChange 移除、外部 atom 与受控状态不重叠、FlexRender 简写、prototype 方法与固定尺寸缩放排序选择变更审计、helpers 类型 meta registries 与 RowData 的 v9 形状、临时 stockFeatures 的移除计划。API 发现建议检查 node_modules/@tanstack/vue-table/dist/index.d.ts 与 useTable.d.ts,并核对 node_modules/@tanstack/table-core/dist/ 中的实际 v9 API。