feat: reset tree store before unmount

Author: ChuChencheng

src/components/Tree.vue

@@ -65,6 +65,7 @@ import {
   computed,
   watch,
   onMounted,
+  onBeforeUnmount,
   PropType
 } from 'vue-demi'
 import TreeStore, { TreeNode } from '../store'
@@ -80,8 +81,14 @@ import {
   TREE_NODE_EVENTS
 } from '../const'
 import { TreeNodeKeyType, IgnoreType } from '../types'
+
 type AnyPropsArrayType = Array<{ [key: string]: any }>
 type VModelType = TreeNodeKeyType | TreeNodeKeyType[]
+interface INonReactiveData {
+  store: TreeStore
+  blockNodes: TreeNode[]
+}
+
 const storeEvents: Array<keyof IEventNames> = [
   'expand',
   'select',
@@ -360,7 +367,7 @@ export default defineComponent({
     ) as Ref<VModelType>
     const debounceTimer = ref(undefined) as Ref<number | undefined>
     const scrollArea = ref()
-    const iframe = ref()
+    const iframe = ref<HTMLIFrameElement | undefined>()
     //computed
     const topSpaceStyles = computed(() => {
       return {
@@ -407,19 +414,25 @@ export default defineComponent({
       }
       return prev
     }, {} as Record<string, Function>)
-    //watch
-    const nonReactive = {
-      store: new TreeStore({
-        keyField: props.keyField,
-        ignoreMode: props.ignoreMode,
-        filteredNodeCheckable: props.filteredNodeCheckable,
-        cascade: props.cascade,
-        defaultExpandAll: props.defaultExpandAll,
-        load: props.load,
-        expandOnFilter: props.expandOnFilter
-      }),
-      blockNodes: [] as TreeNode[]
+
+    const getInitialNonReactiveValues = (): INonReactiveData => {
+      return {
+        store: new TreeStore({
+          keyField: props.keyField,
+          ignoreMode: props.ignoreMode,
+          filteredNodeCheckable: props.filteredNodeCheckable,
+          cascade: props.cascade,
+          defaultExpandAll: props.defaultExpandAll,
+          load: props.load,
+          expandOnFilter: props.expandOnFilter
+        }),
+        blockNodes: [] as TreeNode[]
+      }
     }
+
+    //watch
+    let nonReactive = getInitialNonReactiveValues()
+
     watch(
       () => props.modelValue,
       newVal => {
@@ -1039,12 +1052,24 @@ export default defineComponent({
         }
         loadRootNodes()
       }
-      const $iframe: any = iframe
-      if ($iframe.contentWindow) {
+      const $iframe = iframe.value
+      if ($iframe?.contentWindow) {
         $iframe.contentWindow.addEventListener('resize', updateRender)
       }
     })
 
+    onBeforeUnmount(() => {
+      const $iframe = iframe.value
+      if ($iframe?.contentWindow) {
+        $iframe.contentWindow.removeEventListener('resize', updateRender)
+      }
+      // 卸载组件之前重置 nonReactive 中的数据，缓解 Vue 切换组件可能导致的内存无法释放问题
+      nonReactive.store.disposeListeners()
+      const newNonReactive = getInitialNonReactiveValues()
+      nonReactive.store = newNonReactive.store
+      nonReactive.blockNodes = newNonReactive.blockNodes
+    })
+
     attachStoreEvents()
     return {
       nonReactive,

src/store/tree-store.ts

@@ -1212,5 +1212,11 @@ export default class TreeStore {
       this.listenersMap[eventName][i](...args)
     }
   }
+
+  disposeListeners(): void {
+    for (const eventName in this.listenersMap) {
+      this.listenersMap[eventName] = []
+    }
+  }
   //#endregion Mini EventTarget
 }