组件没有销毁方法，导致内存一直下不去

[hu2014]

组件内部使用的变量，在组件销毁后，还一直存在，导致应用占用内存一直很高

[ChuChencheng]

应该会自动垃圾回收吧，能麻烦给个示例么

[hu2014]

代码里面的examples实例我修改了以下Performance页面，点击 生成大数据 然后渲染树形后，切换到别的页面没有树形的页面，内存一直没变化

[hu2014]

handleBigTree(){
  const data = [],
  root = 3,
  children = 1,
  base = 800000;
  for (let i = 0; i < root; i++) {
    data.push({
      id: `${i}`,
      title: `test-${i}`,
      children: [],
    });
    for (let j = 0; j < children; j++) {
      data[i].children.push({
        id: `${i}-${j}`,
        title: `test-${i}-${j}`,
        children: [],
      });
      for (let k = 0; k < base; k++) {
        data[i].children[j].children.push({
          id: `${i}-${j}-${k}`,
          title: `test-${i}-${j}-${k}`,
        });
      }
    }
    }
    cache = data
  }

[hu2014]

[ChuChencheng]

折腾了一番，感觉是 Vue 切换 component is 的问题，因为 Performance 页面包含了个原生的 select ，所以内存没法被释放。

做了个不含树组件的仓库来复现（Vue3）：https://github.com/ChuChencheng/vue-memory-leak
记得要把 Vue.js devtools 关了，貌似这个也会有影响。

2023-06-07.04.00.55.mov

对比内存快照，发现多了游离的 DOM 节点

同时在本项目的 2.x 分支（Vue2） Example 中做了类似的改动，有同样的问题。

具体是什么问题，得看 Vue 源码了，毕竟官网明确写了切换 component 会卸载之前的组件。
官方 issue 里也有一些类似的问题还没解决的样子。

[hu2014]

我通过在Tree.vue 文件中的销毁方法中手动添加了销毁，解决了内存没变化的问题。由于我TS不熟，手动赋值null,导致与上面定义的类型不一致，该文件中需要所有涉及到的地方添加非空断言！，作者大大看一下有没有别的好的写法。

[ChuChencheng]

缓解了内存占用的情况

Vue2 版本 @wsfe/ctree v2.3.1
Vue2/3 通用版本 @wsfe/vue-tree v3.0.3