diff --git a/frontend/src/components/Notification/index.vue b/frontend/src/components/Notification/index.vue
index fe85d4c114..61eb3c5528 100644
--- a/frontend/src/components/Notification/index.vue
+++ b/frontend/src/components/Notification/index.vue
@@ -94,32 +94,30 @@ export default {
     // 先加载消息类型
     loadMsgTypes()
     this.queryCount()
-    // this.search()
-    // 每30s定时刷新拉取消息
-    /* this.timer = setInterval(() => {
-      this.queryCount()
-    }, 30000) */
   },
   mounted() {
-    bus.$on('refresh-top-notification', () => {
-      if (this.visible) this.search()
-      else this.queryCount()
-    })
-
-    bus.$on('web-msg-topic-call', msg => {
-      this.count = (this.count || this.paginationConfig.total) + 1
-      // this.queryCount()
-      // this.search()
-    })
+    this.initEvents()
   },
   beforeDestroy() {
     this.timer && clearInterval(this.timer)
+    bus.$off('refresh-top-notification', this.refreshTopNotification)
+    bus.$off('web-msg-topic-call', this.webMsgTopicCall)
   },
   destroyed() {
     this.timer && clearInterval(this.timer)
   },
   methods: {
-
+    refreshTopNotification() {
+      if (this.visible) this.search()
+      else this.queryCount()
+    },
+    webMsgTopicCall() {
+      this.count = (this.count || this.paginationConfig.total) + 1
+    },
+    initEvents() {
+      bus.$on('refresh-top-notification', this.refreshTopNotification)
+      bus.$on('web-msg-topic-call', this.webMsgTopicCall)
+    },
     showDetail(row) {
       const param = { ...{ msgNotification: true, msgType: row.typeId, sourceParam: row.param }}
       this.visible = false
diff --git a/frontend/src/components/canvas/components/Editor/MarkLine.vue b/frontend/src/components/canvas/components/Editor/MarkLine.vue
index b3fc0e25b3..4dc67b4d43 100644
--- a/frontend/src/components/canvas/components/Editor/MarkLine.vue
+++ b/frontend/src/components/canvas/components/Editor/MarkLine.vue
@@ -40,10 +40,10 @@ export default {
     eventBus.$on('move', (isDownward, isRightward) => {
       this.showLine(isDownward, isRightward)
     })
-
-    eventBus.$on('unmove', () => {
-      this.hideLine()
-    })
+    eventBus.$on('unmove', this.hideLine)
+  },
+  beforeDestroy() {
+    eventBus.$off('unmove', this.hideLine)
   },
   methods: {
     hideLine() {
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 9072ff6edb..65f1bda35c 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -287,6 +287,7 @@ export default {
     erd.uninstall(this.$refs.canvasInfoTemp)
     erd.uninstall(this.$refs.canvasInfoMain)
     clearInterval(this.timer)
+    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
   },
   methods: {
     _isMobile() {
@@ -411,7 +412,6 @@ export default {
           })
         }
       }, 1500)
-
       eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     }
   }
diff --git a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
index 02b2b192a5..bc759a2de4 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
@@ -178,6 +178,7 @@ export default {
     _this.canvasStyleDataInit()
   },
   beforeDestroy() {
+    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
     clearInterval(this.timer)
   },
   methods: {
diff --git a/frontend/src/components/canvas/components/Editor/Shape.vue b/frontend/src/components/canvas/components/Editor/Shape.vue
index 7bc1fd3ba1..e8cac6dc69 100644
--- a/frontend/src/components/canvas/components/Editor/Shape.vue
+++ b/frontend/src/components/canvas/components/Editor/Shape.vue
@@ -94,13 +94,17 @@ export default {
     }
     this.element.type === 'custom' && (this.pointList = ['l', 'r'])
 
-    eventBus.$on('runAnimation', () => {
+    eventBus.$on('runAnimation', this.runAnimation)
+  },
+  beforeDestroy() {
+    eventBus.$off('runAnimation', this.runAnimation)
+  },
+  methods: {
+    runAnimation() {
       if (this.element === this.curComponent) {
         runAnimation(this.$el, this.curComponent.animations)
       }
-    })
-  },
-  methods: {
+    },
     // 鼠标移入事件
     enter() {
       this.mouseOn = true
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 853bf428f8..4296e4d690 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -1051,9 +1051,7 @@ export default {
     // 获取编辑器元素
     this.$store.commit('getEditor')
     const _this = this
-    eventBus.$on('hideArea', () => {
-      this.hideArea()
-    })
+    eventBus.$on('hideArea', this.hideArea)
     eventBus.$on('startMoveIn', this.startMoveIn)
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     bus.$on('onRemoveLastItem', this.removeLastItem)
@@ -1065,6 +1063,12 @@ export default {
       }, 500)
     }
   },
+  beforeDestroy() {
+    eventBus.$off('hideArea', this.hideArea)
+    eventBus.$off('startMoveIn', this.startMoveIn)
+    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
+    bus.$off('onRemoveLastItem', this.removeLastItem)
+  },
   created() {
   },
   methods: {
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 26b0361302..087bfdd9a9 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -202,6 +202,11 @@ export default {
     this.mobileLayoutInitStatus = this.mobileLayoutStatus
     this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid
   },
+  beforeDestroy() {
+    eventBus.$off('preview', this.preview)
+    eventBus.$off('save', this.save)
+    eventBus.$off('clearCanvas', this.clearCanvas)
+  },
   methods: {
     close() {
       // 关闭页面清理缓存
@@ -734,4 +739,8 @@ export default {
 .el-dropdown-menu__item{
   line-height: 32px;
 }
+
+::v-deep .el-radio-button__inner{
+padding:7px 7px
+}
 </style>
diff --git a/frontend/src/components/canvas/custom-component/DeFrame.vue b/frontend/src/components/canvas/custom-component/DeFrame.vue
index db2dc4ec31..d7c2eabc70 100644
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/frontend/src/components/canvas/custom-component/DeFrame.vue
@@ -67,14 +67,18 @@ export default {
   created() {
   },
   mounted() {
-    bus.$on('frameLinksChange-' + this.element.id, () => {
+    bus.$on('frameLinksChange-' + this.element.id, this.frameLinksChange)
+  },
+  beforeDestroy() {
+    bus.$off('frameLinksChange-' + this.element.id, this.frameLinksChange)
+  },
+  methods: {
+    frameLinksChange() {
       this.frameShow = false
       this.$nextTick(() => {
         this.frameShow = true
       })
-    })
-  },
-  methods: {
+    },
     loaded(e) {
     },
     onError(e) {
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
index ca721e004d..e9fe5ba9c4 100644
--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
@@ -84,7 +84,14 @@ export default {
   },
   mounted() {
     this.initOption()
-    bus.$on('streamMediaLinksChange-' + this.element.id, () => {
+    bus.$on('streamMediaLinksChange-' + this.element.id, this.streamMediaLinksChange)
+  },
+  beforeDestroy() {
+    bus.$off('streamMediaLinksChange-' + this.element.id, this.streamMediaLinksChange)
+    this.destroyPlayer()
+  },
+  methods: {
+    streamMediaLinksChange() {
       this.pOption = this.element.streamMediaLinks[this.element.streamMediaLinks.videoType]
       this.flvPlayer = null
       this.videoShow = false
@@ -92,12 +99,7 @@ export default {
         this.videoShow = true
         this.initOption()
       })
-    })
-  },
-  beforeDestroy() {
-    this.destroyPlayer()
-  },
-  methods: {
+    },
     initOption() {
       if (flvjs.isSupported() && this.pOption.url) {
         this.destroyPlayer()
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index da7590ecb2..0bffa3afa5 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -90,15 +90,19 @@ export default {
     this.initOption()
   },
   mounted() {
-    bus.$on('videoLinksChange-' + this.element.id, () => {
+    bus.$on('videoLinksChange-' + this.element.id, this.videoLinksChange)
+  },
+  beforeDestroy() {
+    bus.$off('videoLinksChange-' + this.element.id, this.videoLinksChange)
+  },
+  methods: {
+    videoLinksChange() {
       this.showVideo = false
       this.$nextTick(() => {
         this.showVideo = true
         this.initOption()
       })
-    })
-  },
-  methods: {
+    },
     initOption() {
       this.pOption = this.element.videoLinks[this.element.videoLinks.videoType]
       this.pOption.height = this.h - (this.curGap * 2)
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 3075c9402e..202080869b 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -404,6 +404,17 @@ export default {
     this.bindPluginEvent()
   },
 
+  beforeDestroy() {
+    bus.$off('plugin-chart-click', this.pluginChartClick)
+    bus.$off('plugin-jump-click', this.pluginJumpClick)
+    bus.$off('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
+    bus.$off('view-in-cache', this.viewInCache)
+    bus.$off('batch-opt-change', this.batchOptChange)
+    bus.$off('onSubjectChange', this.optFromBatchThemeChange)
+    bus.$off('onThemeColorChange', this.optFromBatchThemeChange)
+    bus.$off('onThemeAttrChange', this.optFromBatchSingleProp)
+    bus.$off('clear_panel_linkage', this.clearPanelLinkage)
+  },
   created() {
     this.refId = uuid.v1
     if (this.element && this.element.propValue && this.element.propValue.viewId) {
@@ -441,7 +452,7 @@ export default {
       this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
       this.mergeScale()
     },
-    optFromBatchThemeChange(changeType) {
+    optFromBatchThemeChange() {
       const updateParams = { 'id': this.chart.id }
       const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
       const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
@@ -467,38 +478,34 @@ export default {
           : this.$refs[this.element.propValue.id].chartResize()
       }
     },
-    bindPluginEvent() {
-      bus.$on('plugin-chart-click', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)
-      })
-      bus.$on('plugin-jump-click', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.jumpClick(param)
-      })
-      bus.$on('plugin-add-view-track-filter', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.addViewTrackFilter(param)
-      })
-      bus.$on('view-in-cache', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
-      })
-      bus.$on('batch-opt-change', param => {
-        this.batchOptChange(param)
-      })
-      bus.$on('onSubjectChange', () => {
-        this.optFromBatchThemeChange('subject')
-      })
-      bus.$on('onThemeColorChange', () => {
-        this.optFromBatchThemeChange('themeColor')
-      })
-      bus.$on('onThemeAttrChange', (param) => {
-        this.optFromBatchSingleProp(param)
-      })
-      bus.$on('clear_panel_linkage', (param) => {
-        if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
-          this.$refs[this.element.propValue.id].reDrawView()
-        }
-      })
+    pluginChartClick(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)
+    },
+    pluginJumpClick(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.jumpClick(param)
+    },
+    pluginAddViewTrackFilter(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.addViewTrackFilter(param)
+    },
+    viewInCache(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
+    },
+    clearPanelLinkage(param) {
+      if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
+        this.$refs[this.element.propValue.id].reDrawView()
+      }
+    },
+    bindPluginEvent() {
+      bus.$on('plugin-chart-click', this.pluginChartClick)
+      bus.$on('plugin-jump-click', this.pluginJumpClick)
+      bus.$on('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
+      bus.$on('view-in-cache', this.viewInCache)
+      bus.$on('batch-opt-change', this.batchOptChange)
+      bus.$on('onSubjectChange', this.optFromBatchThemeChange)
+      bus.$on('onThemeColorChange', this.optFromBatchThemeChange)
+      bus.$on('onThemeAttrChange', this.optFromBatchSingleProp)
+      bus.$on('clear_panel_linkage', this.clearPanelLinkage)
     },
-
     addViewTrackFilter(linkageParam) {
       this.$store.commit('addViewTrackFilter', linkageParam)
     },
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index 83934b8679..7864ba6992 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -112,12 +112,20 @@ export default {
     }
   },
   mounted() {
-    bus.$on('onScroll', () => {
+    bus.$on('onScroll', this.onScroll)
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('onScroll', this.onScroll)
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    onScroll() {
       if (this.onFocus) {
         this.$refs.dateRef.hidePicker()
       }
-    })
-    bus.$on('reset-default-value', id => {
+    },
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         if (!this.element.options.attrs.default.isDynamic) {
           this.values = this.fillValueDerfault()
@@ -128,12 +136,7 @@ export default {
         this.values = widget.dynamicDateFormNow(this.element)
         this.dateChange(this.values)
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-  methods: {
+    },
     onBlur() {
       this.onFocus = false
     },
diff --git a/frontend/src/components/widget/DeWidget/DeInputSearch.vue b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
index da83bef29e..063fca3a2b 100644
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
@@ -71,17 +71,18 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-default-value', id => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.search()
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-  methods: {
+    },
     search() {
       if (!this.inDraw) {
         this.element.options.value = this.value
diff --git a/frontend/src/components/widget/DeWidget/DeNumberRange.vue b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
index 6a5a5a34b4..1d286c6161 100644
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@@ -104,7 +104,13 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-default-value', id => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         const values = this.element.options.value
         this.form.min = values[0]
@@ -113,12 +119,7 @@ export default {
         }
         this.search()
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-  methods: {
+    },
     searchWithKey(index) {
       this.timeMachine = setTimeout(() => {
         if (index === this.changeIndex) {
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index fb655c29b1..05eedae15b 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -178,23 +178,25 @@ export default {
     this.initLoad()
   },
   mounted() {
-    bus.$on('onScroll', () => {
+    bus.$on('onScroll', this.onScroll)
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('onScroll', this.onScroll)
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    onScroll() {
       if (this.onFocus) {
         this.$refs.deSelect.blur()
       }
-    })
-    bus.$on('reset-default-value', id => {
+    },
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.changeValue(this.value)
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-
-  methods: {
+    },
     onBlur() {
       this.onFocus = false
     },
diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index 623e92189c..65097931d5 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -200,7 +200,13 @@ export default {
     this.initLoad()
   },
   mounted() {
-    bus.$on('reset-default-value', id => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.changeValue(this.value)
@@ -210,13 +216,7 @@ export default {
           this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
         }
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-
-  methods: {
+    },
     changeInputStyle() {
       if (!this.$parent.handlerInputStyle) return
       this.$nextTick(() => {
diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
index 9b65c5dc8a..a53c0deaff 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@@ -203,21 +203,19 @@ export default {
     this.initLoad()
   },
   mounted() {
-    bus.$on('onScroll', () => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
 
-    })
-    bus.$on('reset-default-value', id => {
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.changeValue(this.value)
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-
-  methods: {
+    },
     onFoucs() {
       this.$nextTick(() => {
         this.handleCoustomStyle()
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index 4fff2799ea..a250968fff 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -283,6 +283,9 @@ export default {
     bus.$on('add-new-tab', this.addNewTab)
     this.activeTabName = this.element.options.tabList[0].name
   },
+  beforeDestroy() {
+    bus.$off('add-new-tab', this.addNewTab)
+  },
   methods: {
     beforeHandleCommond(item, param) {
       return {
@@ -337,13 +340,12 @@ export default {
         return
       }
       this.$warning(this.$t('detabs.please') + this.$t('detabs.selectOthers'))
-      
     },
     sureViewSelector() {
       const nodes = this.$refs.viewSelect.getCurrentSelected()
       if (!nodes || nodes.length === 0) {
         this.$warning(this.$t('detabs.please') + this.$t('detabs.selectview'))
-        
+
         return
       }
       const node = nodes[0]
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index c6f5b46a34..932850a3a5 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -197,14 +197,19 @@ export default {
     bus.$on('set-top-menu-active-info', this.setTopMenuActiveInfo)
     bus.$on('set-top-text-info', this.setTopTextInfo)
     bus.$on('set-top-text-active-info', this.setTopTextActiveInfo)
-    bus.$on('sys-logout', param => {
-      this.logout(param)
-    })
+    bus.$on('sys-logout', this.logout)
     this.showTips && this.$nextTick(() => {
       const drop = this.$refs['my-drop']
       drop && drop.show && drop.show()
     })
   },
+  beforeDestroy() {
+    bus.$off('set-top-menu-info', this.setTopMenuInfo)
+    bus.$off('set-top-menu-active-info', this.setTopMenuActiveInfo)
+    bus.$off('set-top-text-info', this.setTopTextInfo)
+    bus.$off('set-top-text-active-info', this.setTopTextActiveInfo)
+    bus.$off('sys-logout', this.logout)
+  },
   created() {
     this.loadUiInfo()
   },
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 646650b1cd..221a405f0d 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -99,11 +99,15 @@ export default {
     })
   },
   mounted() {
-    bus.$on('PanelSwitchComponent', (c) => {
-      this.componentName = c.name
-    })
+    bus.$on('PanelSwitchComponent', this.panelSwitchComponent)
+  },
+  beforeDestroy() {
+    bus.$off('PanelSwitchComponent', this.panelSwitchComponent)
   },
   methods: {
+    panelSwitchComponent(c) {
+      this.componentName = c.name
+    },
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     },
diff --git a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
index 1f0343777d..a88470fa5a 100644
--- a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
+++ b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
@@ -157,7 +157,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue b/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
index 5076a946bd..fb2b85c5cd 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
@@ -131,7 +131,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
index bd2c348ef8..fc8d195559 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
@@ -141,9 +141,12 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
     this.init()
   },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
+  },
   methods: {
     init() {
       if (!this.item.formatterCfg) {
diff --git a/frontend/src/views/chart/components/drag-item/DrillItem.vue b/frontend/src/views/chart/components/drag-item/DrillItem.vue
index 0103c45771..191a765ede 100644
--- a/frontend/src/views/chart/components/drag-item/DrillItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DrillItem.vue
@@ -73,7 +73,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/FilterItem.vue b/frontend/src/views/chart/components/drag-item/FilterItem.vue
index 4c96c40683..2c541e522f 100644
--- a/frontend/src/views/chart/components/drag-item/FilterItem.vue
+++ b/frontend/src/views/chart/components/drag-item/FilterItem.vue
@@ -74,7 +74,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
index e96f4cb582..8f093a08ce 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
@@ -176,7 +176,10 @@ export default {
   mounted() {
     this.init()
     this.isEnableCompare()
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index 33faf2238a..95831b6a2f 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -173,7 +173,10 @@ export default {
   mounted() {
     this.init()
     this.isEnableCompare()
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index a2e0007652..bc9754d1d4 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -99,9 +99,10 @@ export default {
     this.init()
     this.calcHeight()
     // 监听元素变动事件
-    eventBus.$on('resizing', (componentId) => {
-      this.chartResize()
-    })
+    eventBus.$on('resizing', this.chartResize)
+  },
+  beforeDestroy() {
+    eventBus.$off('resizing', this.chartResize)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index 5da713827e..db542ec0a0 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -117,9 +117,10 @@ export default {
     this.init()
     this.calcHeight()
     // 监听元素变动事件
-    eventBus.$on('resizing', (componentId) => {
-      this.chartResize()
-    })
+    eventBus.$on('resizing', this.chartResize)
+  },
+  beforeDestroy() {
+    eventBus.$off('resizing', this.chartResize)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 94d888454b..c785665929 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -251,9 +251,10 @@ export default {
   },
   mounted() {
     this.init()
-    bus.$on('prop-change-data', () => {
-      this.initCustomColor()
-    })
+    bus.$on('prop-change-data', this.initCustomColor)
+  },
+  beforeDestroy() {
+    bus.$off('prop-change-data', this.initCustomColor)
   },
   methods: {
     changeColorOption(modifyName = 'value') {
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 149773d2b3..8fe83af248 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -145,11 +145,10 @@ export default {
   mounted() {
     this.init()
     // 监听元素变动事件
-    eventBus.$on('resizing', (componentId) => {
-      this.chartResize()
-    })
+    eventBus.$on('resizing', this.chartResize)
   },
   beforeDestroy() {
+    eventBus.$off('resizing',this.chartResize)
     clearInterval(this.scrollTimer)
   },
   methods: {
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 1d17a7817c..7c0e35a8b4 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1334,6 +1334,16 @@ export default {
   },
   mounted() {
   },
+  beforeDestroy() {
+    bus.$off('show-dimension-edit-filter', this.showDimensionEditFilter)
+    bus.$off('show-rename', this.showRename)
+    bus.$off('show-quota-edit-filter', this.showQuotaEditFilter)
+    bus.$off('show-quota-edit-compare', this.showQuotaEditCompare)
+    bus.$off('show-edit-filter', this.showEditFilter)
+    bus.$off('calc-data', this.calcData)
+    bus.$off('plugins-calc-style', this.calcStyle)
+    bus.$off('plugin-chart-click', this.chartClick)
+  },
   activated() {
   },
 
diff --git a/frontend/src/views/panel/GrantAuth/shareTree.vue b/frontend/src/views/panel/GrantAuth/shareTree.vue
index d0c5135784..dbfa223781 100644
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@@ -100,12 +100,7 @@ export default {
     }
   },
   created() {
-    bus.$on('refresh-my-share-out', () => {
-      this.initOutData().then(res => {
-        this.outDatas = res.data
-        this.setMainNull()
-      })
-    })
+    bus.$on('refresh-my-share-out', this.refreshMyShareOut)
     this.initData().then(res => {
       this.datas = res.data
       if (this.msgPanelIds && this.msgPanelIds.length > 0) {
@@ -116,8 +111,16 @@ export default {
       this.outDatas = res.data
     })
   },
-
+  beforeDestroy() {
+    bus.$off('refresh-my-share-out', this.refreshMyShareOut)
+  },
   methods: {
+    refreshMyShareOut() {
+      this.initOutData().then(res => {
+        this.outDatas = res.data
+        this.setMainNull()
+      })
+    },
     initData() {
       const param = {}
       return loadTree(param)
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
index c9120b89b0..72090ff79e 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
@@ -40,9 +40,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange', this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange', this.initForm)
   },
   methods: {
     initForm() {
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
index ece0914936..e97f9de547 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
@@ -71,9 +71,10 @@ export default {
   },
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange', this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange', this.initForm)
   },
   mounted() {
   },
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
index c6f3ea228e..1d94308284 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
@@ -183,9 +183,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange',this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange',this.initForm)
   },
   mounted() {
   },
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
index 1df809ffae..5180770753 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
@@ -60,9 +60,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange',this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange',this.initForm)
   },
   mounted() {
     this.init()
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 72911a30bc..628b7908a6 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -75,20 +75,24 @@ export default {
   watch: {},
 
   mounted() {
-    bus.$on('onSubjectChange', () => {
-      this.collapseShow = false
-      this.$nextTick(() => {
-        this.init()
-        this.dataMerge()
-        this.collapseShow = true
-      })
-    })
+    bus.$on('onSubjectChange', this.onSubjectChange)
+  },
+  beforeDestroy() {
+    bus.$off('onSubjectChange', this.onSubjectChange)
   },
   created() {
     this.init()
   },
 
   methods: {
+    onSubjectChange() {
+      this.collapseShow = false
+      this.$nextTick(() => {
+        this.init()
+        this.dataMerge()
+        this.collapseShow = true
+      })
+    },
     sliderReload() {
       this.sliderShow = false
       this.$nextTick(() => {
@@ -190,5 +194,4 @@ export default {
   padding: 0!important;
 }
 
-
 </style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 10d2672acd..7aeeb89626 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -610,25 +610,7 @@ export default {
     this.init(this.$store.state.panel.panelInfo.id)
   },
   mounted() {
-    // this.insertToBody()
-    bus.$on('component-on-drag', () => {
-      this.show = false
-    })
-
-    bus.$on('component-dialog-edit', () => {
-      this.editDialog()
-    })
-    bus.$on('component-dialog-style', () => {
-      this.styleDialogVisible = true
-    })
-
-    bus.$on('previewFullScreenClose', () => {
-      this.previewVisible = false
-    })
-
-    bus.$on('change_panel_right_draw', (param) => {
-      this.changeRightDrawOpen(param)
-    })
+    this.initEvents()
     const _this = this
     const erd = elementResizeDetectorMaker()
     // 监听div变动事件
@@ -640,10 +622,31 @@ export default {
     this.loadMultiplexingViewTree()
   },
   beforeDestroy() {
+    bus.$off('component-on-drag', this.componentOnDrag)
+    bus.$off('component-dialog-edit', this.editDialog)
+    bus.$off('component-dialog-style', this.componentDialogStyle)
+    bus.$off('previewFullScreenClose', this.previewFullScreenClose)
+    bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
     const elx = this.$refs.rightPanel
     elx && elx.remove()
   },
   methods: {
+    componentOnDrag() {
+      this.show = false
+    },
+    componentDialogStyle() {
+      this.styleDialogVisible = true
+    },
+    previewFullScreenClose() {
+      this.previewVisible = false
+    },
+    initEvents() {
+      bus.$on('component-on-drag', this.componentOnDrag)
+      bus.$on('component-dialog-edit', this.editDialog)
+      bus.$on('component-dialog-style', this.componentDialogStyle)
+      bus.$on('previewFullScreenClose', this.previewFullScreenClose)
+      bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
+    },
     loadMultiplexingViewTree() {
       queryPanelMultiplexingViewTree().then(res => {
         this.viewData = res.data
diff --git a/frontend/src/views/panel/enshrine/index.vue b/frontend/src/views/panel/enshrine/index.vue
index ee84c8905b..b4ff3b082a 100644
--- a/frontend/src/views/panel/enshrine/index.vue
+++ b/frontend/src/views/panel/enshrine/index.vue
@@ -50,6 +50,9 @@ export default {
     bus.$on('panle_start_list_refresh', this.refreshStarts)
     this.initData()
   },
+  beforeDestroy() {
+    bus.$off('panle_start_list_refresh', this.refreshStarts)
+  },
   methods: {
     showPanel(row) {
       initPanelData(row.panelGroupId, function() {
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index f2c265f47d..4a537cd934 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -367,11 +367,11 @@ export default {
     this.ProhibitMultiple()
   },
   mounted() {
-    bus.$on('valid-values-change', valid => {
-      this.validateFilterValue(valid)
-    })
+    bus.$on('valid-values-change', this.validateFilterValue)
+  },
+  beforeDestroy() {
+    bus.$off('valid-values-change', this.validateFilterValue)
   },
-
   methods: {
 
     treeNode(cache) {
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 1fe7a86c66..895e786009 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -45,14 +45,12 @@ export default {
     // }
   },
   mounted() {
-    bus.$on('to-msg-share', params => {
-      this.toMsgShare(params)
-    })
-    bus.$on('PanelSwitchComponent', (c) => {
-      this.param = c.param
-      this.componentName = c.name
-      this.$store.dispatch('panel/setMainActiveName', c.name)
-    })
+    bus.$on('to-msg-share', this.toMsgShare)
+    bus.$on('PanelSwitchComponent', this.panelSwitchComponent)
+  },
+  beforeDestroy() {
+    bus.$off('to-msg-share', this.toMsgShare)
+    bus.$off('PanelSwitchComponent', this.panelSwitchComponent)
   },
   created() {
     bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
@@ -61,6 +59,11 @@ export default {
     this.toMsgShare(routerParam)
   },
   methods: {
+    panelSwitchComponent(c) {
+      this.param = c.param
+      this.componentName = c.name
+      this.$store.dispatch('panel/setMainActiveName', c.name)
+    },
     toMsgShare(routerParam) {
       if (routerParam !== null && routerParam.msgNotification) {
         const panelShareTypeIds = [1, 2, 3]
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 8d2472c4dd..03076f4c60 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -232,15 +232,21 @@ export default {
     }
   },
   mounted() {
-    bus.$on('set-panel-show-type', type => {
-      this.showType = type || 0
-    })
-    bus.$on('set-panel-share-user', userId => {
-      this.shareUserId = userId
-    })
+    bus.$on('set-panel-show-type', this.setPanelShowType)
+    bus.$on('set-panel-share-user', this.setPanelShareUser)
     this.initPdfTemplate()
   },
+  beforeDestroy() {
+    bus.$off('set-panel-show-type', this.setPanelShowType)
+    bus.$off('set-panel-share-user', this.setPanelShareUser)
+  },
   methods: {
+    setPanelShowType(type) {
+      this.showType = type || 0
+    },
+    setPanelShareUser(userId) {
+      this.shareUserId = userId
+    },
     initPdfTemplate() {
       queryAll().then(res => {
         this.pdfTemplateAll = res.data
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index d5b1b6cfbb..a509750703 100644
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@@ -23,9 +23,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('to-msg-ds', params => {
-      this.toMsgDs(params)
-    })
+    bus.$on('to-msg-ds', this.toMsgDs)
+  },
+  beforeDestroy() {
+    bus.$off('to-msg-ds', this.toMsgDs)
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', true)
diff --git a/frontend/src/views/system/task/dataset.vue b/frontend/src/views/system/task/dataset.vue
index 70b2a8841a..12d424225e 100644
--- a/frontend/src/views/system/task/dataset.vue
+++ b/frontend/src/views/system/task/dataset.vue
@@ -4,7 +4,7 @@
     <el-row>
       <el-tabs v-model="tabActive" @tab-click="changeTab">
         <el-tab-pane :label="$t('dataset.task.list')" name="DatasetTaskList">
-          <dataset-task-list v-if="tabActive=='DatasetTaskList'" :param="task" :transCondition="transCondition" @jumpTaskRecord="jumpTaskRecord" />
+          <dataset-task-list v-if="tabActive=='DatasetTaskList'" :param="task" :trans-condition="transCondition" @jumpTaskRecord="jumpTaskRecord" />
         </el-tab-pane>
         <el-tab-pane :label="$t('dataset.task.record')" name="TaskRecord">
           <task-record v-if="tabActive=='TaskRecord'" ref="task_record" :param="task" :trans-condition="transCondition" @jumpTask="jumpTask" />
@@ -38,9 +38,10 @@ export default {
     ])
   },
   mounted() {
-    bus.$on('to-msg-dataset', params => {
-      this.toMsgShare(params)
-    })
+    bus.$on('to-msg-dataset', this.toMsgShare)
+  },
+  beforeDestroy() {
+    bus.$off('to-msg-dataset', this.toMsgShare)
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', false)