临时接手一个存在问题的vue项目，页面存在一定复杂度，随便操作之后内存暴涨，经过多方测试，确定了其中一个大量使用的公共表单组件存在问题，便进行了一系列的测试之后，发现了vue里面$refs会导致其挂载的dom和包含的子组件的dom，对象实例无法销毁：
1： 设置ref属性，并未使用

componentA.vue
<div ref=”refTest”>

  <sub></sub>

</div>
当路由切换之后（切换其他页面, componentA.vue组件销毁），打印浏览器堆栈内存快照，搜索detached

不存在任何detached(游离)dom;

2: 使用了 $refs
mounted() {

console.log(this.$refs.refTest)

}
再次打印堆栈快照：

3.搜索了相关问题之后并没有找到相关问题说明，尝试原生dom移除：

beforeDestroy(){

this.$refs.refTest.parentNode.removeChild(this.$refs.refTest)

}
继续打印堆栈快照发现除了 ref本身的dom，其内部的dom都不存在了，

但这仅仅是简单的嵌套解构，如果不做此操作，反复切换路由（反复加载组件），detached的dom会越来越多，当我加入了实际业务代码之后发现主动删除dom节点并不能完全删除干净，有其他原因导致，经过多方测试最终并未得到有力数据结论.

ps: 建议大家尽可能减少$refs的使用，尤其是复杂的页面，高频使用场景，特别是使用UI组件的表单验证，慎用，至于相关说明官方文档并木有做出明确说明，issure相关也没有人回答，欢迎有见解的伙伴来交流