我觉得可能存在内存溢出的风险。

[xstxhjh]

描述错误

vuejs/core#10976
每次刷新页面网站的内存都会很大幅度的增长。

复现步骤

打开 https://www.naiveui.com/zh-CN/os-theme/components/data-table 页面，在地址栏回车，刷新页面，观察tab处内存变化。

最小复现链接

https://www.naiveui.com/zh-CN/os-theme/components/data-table

系统信息

System:
    OS: macOS 14.2.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 111.47 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v18.19.0/bin/pnpm
    bun: 1.1.6 - ~/.bun/bin/bun
  Browsers:
    Chrome: 125.0.6422.78
    Safari: 17.2.1
  npmPackages:
    naive-ui: ^2.38.2 => 2.38.2 
    vue: ^3.4.27 => 3.4.27

使用的包管理器

npm

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• 提供的复现是最小可复现的示例。

[zl0110]

刷新页面有内存增长，这个问题和框架或组件库应该是没有任何关系的，除非框架使用了持久化缓存相关的API(如：sessionStorage、localStorage...)；
理论上讲，刷新页面后与页面相关的内存与执行环境都会重置：JavaScript执行环境重置、DOM树重建等
刷新后浏览器并没有立即触发GC，我猜测与性能优化有关；
可以使用DevTools Memory面板手动触发GC查看当前标签页内存波动，在我这里看native-ui官网是没有任何内存泄漏现象发生的

[xstxhjh]

我疑惑的点也在这里，通过 DevTools Memory 是没有任何内存泄漏现象出现。
但是 Chrome Tabs 显示的内存大小，在一次访问页面，和刷新后，内存大小出现了不同程度的增幅。
如果是 sessionStorage、localStorage 影响的，不应该在刷新会出现这么大幅度的增长。
我访问了其它页面，nuxt.js、vue.js 都不会出现这种情况，但 native-ui.js 官网就会出现。你可能已经刷新了几次，它在某个零界值就会停止增长。
你可以关闭再打开页面，跟我用一样的方式去观察网站的内存增长，而不是用 DevTools Memory。

[zl0110]

我的意思就是观察网站(此标签页)的内存增长，刷新后使用DevTools Memory面板手动触发GC查看当前标签页内存波动，你会发现此标签页的内存会立马掉下来，那说明浏览器并没有立即回收刷新前标签页的内存，而是等待下次Major GC

[xstxhjh]

这不是内存泄露，但是这可能也是一个需要优化的地方，可能是native-ui某个逻辑或使用了某个API导致的。
因为这个在项目越来越大的情况下，就会愈发明显。一个Tab页，可能存在1～2G内存未释放的情况。
这个issue期望有更多的人讨论发现这一优化点。

[Super-Badmen-Viper]

我建议你使用vue-virtual-scroller来代替n-data-table。我已经使用native ui开发我的开源软件好几个月了，所以按照我的经验，你使用Native ui需要“扬长避短[doge]”，它适合用来快速开发静态布局，如果你用它搞大量的动态数据(里面还渲染一些图片等等大资源)，那么内存将陷入火葬场，这在Electron中尤为明显[doge]。即使你使用了vue-virtual-scroller，你也不能在vue-virtual-scroller中内嵌native ui的组件(那么内存又将陷入火葬场，且gc不掉的[doge])

[Super-Badmen-Viper]

靠重构来这个issues的成本太高，所以使用时只能扬长避短，毕竟没有什么东西是万能的[doge]

[Zheng-Changfu]

这不是内存泄露，但是这可能也是一个需要优化的地方，可能是native-ui某个逻辑或使用了某个API导致的。 因为这个在项目越来越大的情况下，就会愈发明显。一个Tab页，可能存在1～2G内存未释放的情况。 这个issue期望有更多的人讨论发现这一优化点。

pr #6319 、#6313、#6310 解决一些内存泄漏的问题

[Steve-xmh]

本人有利用过 NaiveUI 制作过自己的歌词编辑器，但是由于此库的几个潜在的内存泄露和滥用资源的问题已经放弃使用 NaiveUI 框架并迁移到 React 开发了，情况如下：

• NaiveUI 的主题滥用了 CSS 变量，几乎每个组件不论使用与否都设置了大量无用的 CSS 变量，且难以裁剪或优化，如果只是一两个可能影响不大，但是扩展到数百个（例如本人的项目需要同时显示100多个按钮，因为 NaiveUI 自己的按钮基于上述情况十分卡顿）之后性能的问题就会凸显出来：
  
• NaiveUI 的虚拟滚动组件使用的是 transform 属性，与我在 React 中见到的使用 left 或 top 属性不一样，transform 会使网页产生大量 GPU 分层，性能不一定有影响，但是会大幅增加显存占用（如果放在 SoC 或集显上则带来的内存占用影响立竿见影）：
  

NaiveUI 正如其名，直到现在还只是一个还很稚嫩的组件库，提出这些并用比较偏激的用词并无贬低之意，但是如果作者能够优化改善，就能够在发展上走得更远了。