tanstack-vue-table-devtools

用途

该技能用于把 Vue Table v9 的表格实例或 ref 连接到 Devtools，便于在开发过程中观察和调试表格。

主要能力

通过 tableDevtoolsPlugin({}) 挂载 Vue TanStackDevtools 宿主，方式参照 docs/devtools.md。
通过 useTanStackTableDevtools 注册表格目标。
hook 接受 table 或 ref-like table，并跟踪表格替换。

使用方式

基础设置示例：

<script setup lang="ts">
import { useTable, tableFeatures } from '@tanstack/vue-table'
import { useTanStackTableDevtools } from '@tanstack/vue-table-devtools'

const table = useTable({
  key: 'users-table',
  features: tableFeatures({}),
  columns: [],
  data: [],
})

useTanStackTableDevtools(table)
</script>

用户表注册完成。请按照 docs/devtools.md，使用 tableDevtoolsPlugin({}) 挂载一次 Vue TanStackDevtools 宿主。

Hooks 与组件

该 hook 接受 table 或 ref-like table，并跟踪替换。请保持响应式包装不变，不要提前解包一次。

常见错误

HIGH ref 在注册前被解包

错误：只读取一次 ref，仅注册该快照。

正确：传入 hook 所接受的 ref/maybe-ref 形态。

适配器会监听解析后的 table，并在其变化时清理。

来源：TanStack/table:packages/vue-table-devtools/src/useTanStackTableDevtools.ts

HIGH key 缺失或重复

错误：省略 key，或在多个已挂载表格间复用同一个 key。

正确：为每个目标使用一个具有描述性的稳定 key。

注册表会跳过无 key 的表格，并替换重复的目标。

来源：TanStack/table:packages/table-devtools/src/tableTarget.ts

MEDIUM 将开发环境门控误认为插件失效

错误：期望默认面板/插件/hook 在生产环境可用。

正确：除非显式导入 /production，否则保持常规 Devtools 仅开发环境可用。

该包入口在非开发环境下会选择 no-op 导出。

来源：TanStack/table:packages/vue-table-devtools/src/index.ts

API 发现

查看 node_modules/@tanstack/vue-table-devtools/dist/index.d.ts 和 useTanStackTableDevtools.d.ts，了解当前 ref 处理方式。