Vue3/Vuetify项目中动态组件实现的表格存在严重内存泄漏问题求助

看起来你遇到了个挺头疼的内存泄漏难题，大型组件里的这类问题排查确实费神，我结合你给出的代码片段和Vue3/Vuetify场景下常见的内存泄漏诱因，给你梳理几个排查和修复的方向：

• 先排查draggable组件的使用问题
  你把rows同时传给了draggable的:list，又在内部用v-for="item in rows"遍历，这可能造成重复的引用绑定。建议改用draggable插槽提供的参数来遍历，而不是直接用外部的rows，避免额外的引用持有。另外，@end绑定的onRowDrop方法，如果里面有对组件实例或rows内对象的强引用，记得在组件卸载时解绑相关逻辑，或者用WeakRef来弱化引用。

• 动态单元格组件的销毁检查
  既然是条件渲染不同组件作为单元格，要确保这些动态组件自身能正确清理资源：

  • 如果动态组件内部用了setInterval、window.addEventListener这类API，一定要在onUnmounted钩子中彻底清除；
  • 给动态组件加上唯一的key（比如:key="item.id + column.key"），避免Vue复用组件导致旧状态残留，积累不必要的内存。

• v-data-table-server的引用清理
  作为服务端分页组件，要注意items更新时旧数据的引用情况：

  • 如果items来自Pinia/Vuex，检查是否有未清理的计算属性、watch监听还持有旧的items引用；
  • 表格插槽内的元素如果绑定了事件，比如@click，虽然Vue会自动处理，但如果回调里引用了大对象，也可能导致泄漏，尽量让回调逻辑轻量化。

• 组件卸载时的手动清理
  在表格组件的onUnmounted钩子中，手动清理可能的残留引用：比如把对rows的全局引用、draggable的实例引用都设为null；如果用的draggable第三方库有销毁实例的方法，记得在此时调用（比如draggableInstance.destroy()）。

• 用工具定位泄漏点
  可以用Chrome DevTools的Memory面板，做两次快照：一次是表格加载完成后，一次是切换页面销毁表格后，对比快照里的组件实例（比如你的动态单元格组件、表格组件）是否还存在，通过引用链就能找到是谁在持有这些实例；也可以用Vue DevTools的Performance面板，记录组件挂载/卸载流程，看是否有组件没被正确卸载。

备注：内容来源于stack exchange，提问作者Patryk Marchut