VUE中$refs的坑

临时接手一个存在问题的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相关也没有人回答，欢迎有看法的伙伴来交流