Fix the memory leak of Select component

view-design · Jan 12, 2021 · 6ee13b1 · 6ee13b1
1 parent 403a4f7
commit 6ee13b1
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/src/components/select/dropdown.vue b/src/components/select/dropdown.vue
@@ -110,8 +110,11 @@
             this.$on('on-destroy-popper', this.destroy);
         },
         beforeDestroy () {
+            this.$off('on-update-popper', this.update);
+            this.$off('on-destroy-popper', this.destroy);
             if (this.popper) {
                 this.popper.destroy();
+                this.popper = null;
             }
         }
     };

diff --git a/src/components/select/functional-options.vue b/src/components/select/functional-options.vue
@@ -1,4 +1,3 @@
-
 <script>
     const returnArrayFn = () => [];
 
@@ -15,15 +14,19 @@
             slotUpdateHook: {
                 type: Function,
                 default: () => {}
-            },
+            }
         },
-        functional: true,
-        render(h, {props, parent}){
+        // if use functional, there will be memory leaks
+        // functional: true,
+        render(h) {
             // to detect changes in the $slot children/options we do this hack
             // so we can trigger the parents computed properties and have everything reactive
             // although $slot.default is not
-            if (props.slotOptions !== parent.$slots.default) props.slotUpdateHook();
-            return props.options;
+            if (this.slotOptions !== this.$parent.$slots.default) this.slotUpdateHook();
+            return h('ul', [
+                this.$slots.default,
+                this.options
+            ]);
         }
     };
 </script>
diff --git a/src/components/select/option-group.vue b/src/components/select/option-group.vue
@@ -43,6 +43,9 @@
                 this.queryChange();
                 return true;
             });
+        },
+        beforeDestroy() {
+            this.$off('on-query-change');
         }
     };
 </script>
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
@@ -22,10 +22,8 @@
             @keydown.tab="handleKeydown"
             @keydown.delete="handleKeydown"
 
-
             @mouseenter="hasMouseHoverHead = true"
             @mouseleave="hasMouseHoverHead = false"
-
         >
             <slot name="input">
                 <input type="hidden" :name="name" :value="publicValue">
@@ -67,18 +65,26 @@
                 v-transfer-dom
             >
                 <ul v-show="showNotFoundLabel && !allowCreate" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
-                <ul :class="prefixCls + '-dropdown-list'">
+
+                <functional-options
+                    v-if="(!remote) || (remote && !loading)"
+                    :options="selectOptions"
+                    :slot-update-hook="updateSlotOptions"
+                    :slot-options="slotOptions"
+                    :class="prefixCls + '-dropdown-list'"
+                >
+                    <li :class="prefixCls + '-item'" v-if="showCreateItem" @click="handleCreateItem">
+                        {{ query }}
+                        <Icon type="md-return-left" :class="prefixCls + '-item-enter'" />
+                    </li>
+                </functional-options>
+                <ul :class="prefixCls + '-dropdown-list'" v-else>
                     <li :class="prefixCls + '-item'" v-if="showCreateItem" @click="handleCreateItem">
                         {{ query }}
                         <Icon type="md-return-left" :class="prefixCls + '-item-enter'" />
                     </li>
-                    <functional-options
-                        v-if="(!remote) || (remote && !loading)"
-                        :options="selectOptions"
-                        :slot-update-hook="updateSlotOptions"
-                        :slot-options="slotOptions"
-                    ></functional-options>
                 </ul>
+
                 <ul v-show="loading" :class="[prefixCls + '-loading']">{{ localeLoadingText }}</ul>
             </Drop>
         </transition>
@@ -317,8 +323,10 @@
                 }
             }
         },
+        beforeDestroy () {
+            this.$off('on-select-selected');
+        },
         data () {
-
             return {
                 prefixCls: prefixCls,
                 values: [],