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相關也沒有人回答，歡迎有看法的夥伴來交流