Clear timing events and event listeners when component unmounts

layouts/VabTopBar/index.vue

@@ -76,12 +76,16 @@
       async refreshRoute() {
         this.$baseEventBus.$emit('reload-router-view')
         this.pulse = true
-        setTimeout(() => {
+        this.timeOutID = setTimeout(() => {
           this.pulse = false
         }, 1000)
       },
     },
-  }
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID);
+    }
+  };
 </script>
 <style lang="scss" scoped>
   .top-bar-container {

src/layouts/components/VabAppMain/index.vue

@@ -58,13 +58,19 @@
       },
     },
     created() {
-      //重载所有路由
+      const handleReloadRouterView = () => {
-      this.$baseEventBus.$on('reload-router-view', () => {
         this.routerView = false
         this.$nextTick(() => {
           this.routerView = true
         })
-      })
+      };
+
+      //重载所有路由
+      this.$baseEventBus.$on('reload-router-view', handleReloadRouterView)
+
+      this.$once('hook:beforeDestroy', () => {
+        this.$baseEventBus.$off('reload-router-view', handleReloadRouterView);
+      });
     },
     mounted() {},
     methods: {

src/layouts/components/VabNavBar/index.vue

@@ -38,6 +38,7 @@
     data() {
       return {
         pulse: false,
+        timeOutID: null
       }
     },
     computed: {
@@ -58,12 +59,16 @@
       async refreshRoute() {
         this.$baseEventBus.$emit('reload-router-view')
         this.pulse = true
-        setTimeout(() => {
+        this.timeOutID = setTimeout(() => {
           this.pulse = false
         }, 1000)
       },
     },
-  }
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID);
+    }
+  };
 </script>
 
 <style lang="scss" scoped>

src/layouts/components/VabThemeBar/index.vue

@@ -79,9 +79,11 @@
       }),
     },
     created() {
-      this.$baseEventBus.$on('theme', () => {
+      const handleTheme = () => {
         this.handleOpenThemeBar()
-      })
+      };
+
+      this.$baseEventBus.$on('theme', handleTheme)
       const theme = localStorage.getItem('vue-admin-beautiful-theme')
       if (null !== theme) {
         this.theme = JSON.parse(theme)
@@ -91,6 +93,10 @@
         this.theme.header = this.header
         this.theme.tabsBar = this.tabsBar
       }
+
+      this.$once('hook:beforeDestroy', () => {
+        this.$baseEventBus.$off('theme', handleTheme);
+      });
     },
     methods: {
       ...mapActions({

src/layouts/index.vue

@@ -51,7 +51,11 @@
   export default {
     name: 'Layout',
     data() {
-      return { oldLayout: '' }
+      return {
+        oldLayout: '',
+        controller: new window.AbortController(),
+        timeOutID: null
+      };
     },
     computed: {
       ...mapGetters({
@@ -72,6 +76,8 @@
     },
     beforeDestroy() {
       window.removeEventListener('resize', this.handleResize)
+      this.controller.abort();
+      clearTimeout(this.timeOutID);
     },
     mounted() {
       this.oldLayout = this.layout
@@ -90,7 +96,7 @@
           this.$store.dispatch('settings/changeLayout', this.oldLayout)
         }
         this.$store.dispatch('settings/toggleDevice', 'mobile')
-        setTimeout(() => {
+        this.timeOutID = setTimeout(() => {
           this.$store.dispatch('settings/foldSideBar')
         }, 2000)
       } else {
@@ -103,7 +109,10 @@
             if (e.key === tokenName || e.key === null) window.location.reload()
             if (e.key === tokenName && e.value === null) window.location.reload()
           },
-          false
+          {
+            capture: false,
+            signal: this.controller?.signal
+          }
         )
       })
     },

src/views/login/index.vue

@@ -103,6 +103,7 @@
         loading: false,
         passwordType: 'password',
         redirect: undefined,
+        timeOutID: null,
       }
     },
     watch: {
@@ -118,11 +119,12 @@
     },
     beforeDestroy() {
       document.body.style.overflow = 'auto'
+      clearTimeout(this.timeOutID)
     },
     mounted() {
       this.form.username = 'admin'
       this.form.password = '123456'
-      setTimeout(() => {
+      this.timeOutID = setTimeout(() => {
         this.handleLogin()
       }, 3000)
     },

src/views/personnelManagement/menuManagement/index.vue

@@ -101,6 +101,7 @@
         list: [],
         listLoading: true,
         elementLoadingText: '正在加载...',
+        timeOutID: null,
       }
     },
     async created() {
@@ -108,6 +109,10 @@
       this.data = roleData.data
       this.fetchData()
     },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
     methods: {
       handleEdit(row) {
         if (row.path) {
@@ -130,7 +135,7 @@
 
         const { data } = await getList()
         this.list = data
-        setTimeout(() => {
+        this.timeOutID = setTimeout(() => {
           this.listLoading = false
         }, 300)
       },

src/views/personnelManagement/roleManagement/index.vue

@@ -64,11 +64,16 @@
           pageSize: 10,
           permission: '',
         },
+        timeOutID: null,
       }
     },
     created() {
       this.fetchData()
     },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
     methods: {
       setSelectRows(val) {
         this.selectRows = val
@@ -118,7 +123,7 @@
         const { data, totalCount } = await getList(this.queryForm)
         this.list = data
         this.total = totalCount
-        setTimeout(() => {
+        this.timeOutID = setTimeout(() => {
           this.listLoading = false
         }, 300)
       },

src/views/personnelManagement/userManagement/index.vue

@@ -72,11 +72,16 @@
           pageSize: 10,
           username: '',
         },
+        timeOutID: null,
       }
     },
     created() {
       this.fetchData()
     },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
     methods: {
       setSelectRows(val) {
         this.selectRows = val
@@ -126,7 +131,7 @@
         const { data, totalCount } = await getList(this.queryForm)
         this.list = data
         this.total = totalCount
-        setTimeout(() => {
+        this.timeOutID = setTimeout(() => {
           this.listLoading = false
         }, 300)
       },

src/views/vab/smallComponents/index.vue

@@ -53,6 +53,8 @@
         startVal: 0,
         endVal: 20,
         timeInterval: null,
+        timeOutID: null,
+        timeOutID2: null,
       }
     },
     mounted() {
@@ -69,17 +71,19 @@
       if (this.clearInterval) {
         clearInterval(this.timeInterval)
       }
+      clearTimeout(this.timeOutID)
+      clearTimeout(this.timeOutID2)
     },
     methods: {
       handleProfile() {
         this.profileShow = false
-        setTimeout(() => {
+        this.timeOutID = setTimeout(() => {
           this.profileShow = true
         })
       },
       handleSolidText() {
         this.solidTextShow = false
-        setTimeout(() => {
+        this.timeOutID2 = setTimeout(() => {
           this.solidTextShow = true
         })
       },

src/views/vab/table/index.vue

@@ -109,6 +109,7 @@
           pageSize: 20,
           title: '',
         },
+        timeOutID: null,
       }
     },
     computed: {
@@ -119,7 +120,9 @@
     created() {
       this.fetchData()
     },
-    beforeDestroy() {},
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
     mounted() {},
     methods: {
       tableSortChange() {
@@ -181,7 +184,7 @@
         })
         this.imageList = imageList
         this.total = totalCount
-        setTimeout(() => {
+        this.timeOutID = setTimeout(() => {
           this.listLoading = false
         }, 500)
       },