refine

src/components/Charts/mixins/resize.js

@@ -3,15 +3,21 @@ import { debounce } from '@/utils'
 export default {
   data() {
     return {
-      $_sidebarElm: null
+      $_sidebarElm: null,
+      $_resizeHandler: null
     }
   },
   mounted() {
     this.initListener()
   },
   activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
     this.resize()
-    this.initListener()
   },
   beforeDestroy() {
     this.destroyListener()
@@ -24,27 +30,27 @@ export default {
     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
     $_sidebarResizeHandler(e) {
       if (e.propertyName === 'width') {
-        this.__resizeHandler()
+        this.$_resizeHandler()
       }
     },
     initListener() {
-      this.__resizeHandler = debounce(() => {
+      this.$_resizeHandler = debounce(() => {
         this.resize()
       }, 100)
-      window.addEventListener('resize', this.__resizeHandler)
+      window.addEventListener('resize', this.$_resizeHandler)
 
       this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
       this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
     },
     destroyListener() {
-      window.removeEventListener('resize', this.__resizeHandler)
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
 
       this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
     },
     resize() {
-      if (this.chart) {
+      const { chart } = this
-        this.chart.resize()
+      chart && chart.resize()
-      }
     }
   }
 }