renderer: remove transition and keep-alive workarounds

Rocket1184 · Apr 12, 2020 · bd7b16e · bd7b16e
1 parent f820d77
commit bd7b16e
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 69 deletions.
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -2,11 +2,10 @@
     <div>
         <AppNav></AppNav>
         <div class="router-view">
-            <transition :name="transitionName"
-                @after-leave="handleAfterLeave">
-                <keep-alive-patched :include="KeepAlive">
+            <transition :name="transitionName">
+                <keep-alive :include="KeepAlive">
                     <router-view></router-view>
-                </keep-alive-patched>
+                </keep-alive>
             </transition>
         </div>
         <PlayerBar></PlayerBar>
@@ -31,16 +30,6 @@ export default {
             transitionName: 'fade-up'
         };
     },
-    methods: {
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            for (const k of this.KeepAlive) {
-                if (el.classList.contains(k)) return;
-            }
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
-        }
-    },
     created() {
         this.KeepAlive = ['index', 'player', 'favorite'];
         this.$router.beforeEach((to, from, next) => {

diff --git a/src/renderer/components/ArtistDetail/ArtistDetail.vue b/src/renderer/components/ArtistDetail/ArtistDetail.vue
@@ -43,13 +43,12 @@
                 :value="tab[0]">{{tab[1]}}</mu-tab>
         </mu-tabs>
         <transition mode="out-in"
-            :name="transitionName"
-            @after-leave="handleAfterLeave">
-            <keep-alive-patched>
+            :name="transitionName">
+            <keep-alive>
                 <component :is="detailCompo"
                     :artist="artist"
                     @scroll="handleScroll"></component>
-            </keep-alive-patched>
+            </keep-alive>
         </transition>
     </div>
 </template>
@@ -151,11 +150,6 @@ export default {
             if (el) {
                 el.scrollTo({ top: 300, behavior: 'smooth' });
             }
-        },
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
         }
     },
     created() {

diff --git a/src/renderer/components/UserDetail/UserDetail.vue b/src/renderer/components/UserDetail/UserDetail.vue
@@ -56,13 +56,12 @@
                 :value="tab[0]">{{tab[1]}}</mu-tab>
         </mu-tabs>
         <transition mode="out-in"
-            :name="transitionName"
-            @after-leave="handleAfterLeave">
-            <keep-alive-patched>
+            :name="transitionName">
+            <keep-alive>
                 <component :is="detailCompo"
                     :user="user"
                     :isSelf="isSelf"></component>
-            </keep-alive-patched>
+            </keep-alive>
         </transition>
     </div>
 </template>
@@ -189,11 +188,6 @@ export default {
                 this.transitionName = 'slide-left';
             }
             this.tab = val;
-        },
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
         }
     },
     watch: {

diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -12,7 +12,6 @@ import routes from './routes';
 import { isLinux } from './util/globals';
 import { initTheme } from './util/theme';
 import DblclickRipple from './util/dblclick-ripple';
-import KeepAlivePatched from './util/keep-alive-patched';
 import './style.css';
 import './transition.css';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
@@ -22,7 +21,6 @@ Vue.use(MuseUI);
 Vue.use(Toast);
 Vue.use(Message);
 Vue.use(DblclickRipple);
-Vue.use(KeepAlivePatched);
 Vue.component('RecycleScroller', RecycleScroller);
 
 try {

diff --git a/src/renderer/page/Comment/Comment.vue b/src/renderer/page/Comment/Comment.vue
@@ -17,15 +17,14 @@
         </mu-tabs>
         <div class="list-wrapper">
             <transition mode="out-in"
-                :name="transitionName"
-                @after-leave="handleAfterLeave">
-                <keep-alive-patched>
+                :name="transitionName">
+                <keep-alive>
                     <CommentList :key="tab"
                         :thread="thread"
                         v-bind="comment[tab]"
                         @page="loadComments"
                         @reply="handleReply"></CommentList>
-                </keep-alive-patched>
+                </keep-alive>
             </transition>
         </div>
         <mu-dialog dialog-class="comment-editor-dlg"
@@ -193,11 +192,6 @@ export default {
             } else {
                 this.$toast.message(`发布评论失败 ...  ${resp.code}: ${resp.msg}`);
             }
-        },
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
         }
     },
     watch: {

diff --git a/src/renderer/page/Favorite/Favorite.vue b/src/renderer/page/Favorite/Favorite.vue
@@ -10,8 +10,7 @@
         </mu-tabs>
         <div class="fav-content">
             <transition mode="out-in"
-                :name="transitionName"
-                @after-leave="handleAfterLeave">
+                :name="transitionName">
                 <component :is="favCompo"></component>
             </transition>
         </div>
@@ -67,11 +66,6 @@ export default {
                 this.transitionName = 'slide-left';
             }
             this.tab = val;
-        },
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
         }
     },
     created() {

diff --git a/src/renderer/util/keep-alive-patched.js b/src/renderer/util/keep-alive-patched.js