使用ResizeObserver代替window.resize事件

vue/src/component/SearchForm/index.vue

@@ -51,11 +51,14 @@ export default {
 
     mounted() {
         this.resize()
-
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.$el.parentNode)
 
         this.$once('hook:beforeDestroy', () => {
-            window.removeEventListener('resize', this.resize)
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect()
+                this.resizeObserver = null
+            }
         })
     },
 

vue/src/mixin/chart/resize.js

@@ -1,32 +1,29 @@
 import {debounce} from '@/util'
 
 export default {
-    data() {
-        return {
-            $_sidebarElm: null,
-            $_resizeHandler: null
-        }
-    },
-
     methods: {
         $_initResizeEvent() {
-            window.addEventListener('resize', this.$_resizeHandler)
+            this.resizeObserver = new ResizeObserver(() => this.$_resizeHandler())
+            this.resizeObserver.observe(this.$el)
         },
         $_destroyResizeEvent() {
-            window.removeEventListener('resize', this.$_resizeHandler)
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect()
+                this.resizeObserver = null
+            }
         }
     },
 
     mounted() {
         this.$_resizeHandler = debounce(() => this.chart && this.chart.resize())
         this.$_initResizeEvent()
-        this.$nextTick(this.$_resizeHandler)
+        this.$nextTick(() => this.$_resizeHandler())
         this.$once('hook:deactivated', this.$_destroyResizeEvent)
         this.$once('hook:beforeDestroy', this.$_destroyResizeEvent)
     },
 
     activated() {
         this.$_initResizeEvent()
-        this.$nextTick(this.$_resizeHandler)
+        this.$nextTick(() => this.$_resizeHandler())
     }
 }

vue/src/plugin/canvasAnimation/firework/index.js

@@ -73,14 +73,14 @@ export default class Firework {
         this.rAF = null
         this.timer = null
         this.stopSign = false
-        this.resize = this.resize.bind(this)
         this.loop = this.loop.bind(this)
         this.addRocket = this.addRocket.bind(this)
         this.start()
     }
 
     start() {
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.canvas)
         document.addEventListener('click', this.addRocket)
         this.timer = window.setInterval(this.addRocket, 1000)
         this.resize()
@@ -88,7 +88,10 @@ export default class Firework {
     }
 
     stop() {
-        window.removeEventListener('resize', this.resize)
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
         window.removeEventListener('click', this.addRocket)
         this.stopSign = true
         this.rockets = []

vue/src/plugin/canvasAnimation/godrays/index.js

@@ -12,19 +12,22 @@ export default class Godrays {
         this.godraysCtx = this.godraysCanvas.getContext('2d')
         this.rAF = null
         this.stopSign = false
-        this.resize = this.resize.bind(this)
         this.loop = this.loop.bind(this)
         this.start()
     }
 
     start() {
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.canvas)
         this.resize()
         this.loop()
     }
 
     stop() {
-        window.removeEventListener('resize', this.resize)
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
         this.stopSign = true
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
         this.godraysCtx.clearRect(0, 0, this.godraysCanvas.width, this.godraysCanvas.height)

vue/src/plugin/canvasAnimation/moveFollowMouse/index.js

@@ -10,7 +10,6 @@ export default class MoveFollowMouse {
         this.num = num
         this.gravityDistance = gravityDistance
         this.mousePos = {x: 0, y: 0}
-        this.resize = this.resize.bind(this)
         this.loop = this.loop.bind(this)
         this.getMousePos = this.getMousePos.bind(this)
         this.start()
@@ -20,14 +19,18 @@ export default class MoveFollowMouse {
         for (let i = 0; i < this.num; i += 1) {
             this.particles.push(new Particle())
         }
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.canvas)
         window.addEventListener('mousemove', this.getMousePos)
         this.resize()
         this.loop()
     }
 
     stop() {
-        window.removeEventListener('resize', this.resize)
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
         window.removeEventListener('mousemove', this.getMousePos)
         this.stopSign = true
         this.particles = []

vue/src/plugin/canvasAnimation/particleBall/index.js

@@ -11,20 +11,23 @@ export default class ParticleBall {
         this.maxParticle = maxParticle
         this.turnSpeed = turnSpeed
         this.particles = []
-        this.resize = this.resize.bind(this)
         this.loop = this.loop.bind(this)
         this.start()
     }
 
     start() {
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.canvas)
         this.resize()
         this.initDot()
         this.loop()
     }
 
     stop() {
-        window.removeEventListener('resize', this.resize)
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
         this.stopSign = true
         this.particles = []
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

vue/src/plugin/canvasAnimation/particleNetwork/index.js

@@ -14,7 +14,6 @@ export default class ParticleNetwork {
         this.rAF = null
         this.timer = null
         this.stopSign = false
-        this.resize = this.resize.bind(this)
         this.loop = this.loop.bind(this)
         this.start()
     }
@@ -174,7 +173,8 @@ export default class ParticleNetwork {
             this.removeInteractionParticle()
         }.bind(this)
 
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.canvas)
         window.addEventListener('mousemove', this.onMouseMove)
         window.addEventListener('touchmove', this.onTouchMove)
         window.addEventListener('mousedown', this.onMouseDown)
@@ -185,7 +185,10 @@ export default class ParticleNetwork {
     }
 
     unbindUiActions() {
-        window.removeEventListener('resize', this.resize)
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
         window.removeEventListener('mousemove', this.onMouseMove)
         window.removeEventListener('touchmove', this.onTouchMove)
         window.removeEventListener('mousedown', this.onMouseDown)

vue/src/plugin/canvasAnimation/particleWave/index.js

@@ -20,7 +20,6 @@ export default class ParticleWave {
         this.particleWaveWalker = 0
         this.rAF = null
         this.stopSign = false
-        this.resize = this.resize.bind(this)
         this.loop = this.loop.bind(this)
         this.start()
     }
@@ -67,7 +66,8 @@ export default class ParticleWave {
     }
 
     start() {
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.canvas)
         this.resize()
         this.initParticle()
         this.initParticleColor()
@@ -77,7 +77,10 @@ export default class ParticleWave {
     }
 
     stop() {
-        window.removeEventListener('resize', this.resize)
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
         this.stopSign = true
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
     }

vue/src/plugin/canvasAnimation/reflectRain/index.js

@@ -9,19 +9,22 @@ export default class ReflectRain {
         this.stopSign = false
         this.canvas = canvas
         this.ctx = canvas.getContext('2d')
-        this.resize = this.resize.bind(this)
         this.loop = this.loop.bind(this)
         this.start()
     }
 
     start() {
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.canvas)
         this.resize()
         this.loop()
     }
 
     stop() {
-        window.removeEventListener('resize', this.resize)
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
         this.stopSign = true
         this.rainDrops = []
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

vue/src/plugin/canvasAnimation/sparkRain/index.js

@@ -24,14 +24,14 @@ export default class SparkRain {
         this.rAF = null
         this.timer = null
         this.stopSign = false
-        this.resize = this.resize.bind(this)
         this.loop = this.loop.bind(this)
         this.addSpark = this.addSpark.bind(this)
         this.start()
     }
 
     start() {
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.canvas)
         this.resize()
         this.timer = window.setInterval(
             () => this.sparks.length < this.options.amount && this.addSpark(),
@@ -40,7 +40,10 @@ export default class SparkRain {
     }
 
     stop() {
-        window.removeEventListener('resize', this.resize)
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
         this.stopSign = true
         this.sparks = []
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

vue/src/plugin/canvasAnimation/sunlight/index.js

@@ -8,7 +8,6 @@ export default class Sunlight {
         this.mouse = {down: 0}
         this.rAF = null
         this.stopSign = false
-        this.resize = this.resize.bind(this)
         this.loop = this.loop.bind(this)
         this.mousedown = this.mousedown.bind(this)
         this.mouseup = this.mouseup.bind(this)
@@ -16,7 +15,8 @@ export default class Sunlight {
     }
 
     start() {
-        window.addEventListener('resize', this.resize)
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.canvas)
         window.addEventListener('mouseup', this.mouseup)
         window.addEventListener('mousedown', this.mousedown)
         this.resize()
@@ -24,7 +24,10 @@ export default class Sunlight {
     }
 
     stop() {
-        window.removeEventListener('resize', this.resize)
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
         window.removeEventListener('mouseup', this.mouseup)
         window.removeEventListener('mousedown', this.mousedown)
         this.stopSign = true

vue/src/view/example/cool/fluidPage.vue

@@ -14,18 +14,20 @@ export default {
         return {
             sign: true,
             width: 1200,
-            height: 800,
-            $_resizeHandler: null,
-            parentDom: null
+            height: 800
         }
     },
 
     methods: {
         $_initResizeEvent() {
-            window.addEventListener('resize', this.$_resizeHandler)
+            this.resizeObserver = new ResizeObserver(() => this.$_resizeHandler())
+            this.resizeObserver.observe(this.parentDom)
         },
         $_destroyResizeEvent() {
-            window.removeEventListener('resize', this.$_resizeHandler)
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect()
+                this.resizeObserver = null
+            }
         },
         start() {
             import('@/plugin/webgl/fluid').then(_ => _.default(this.$el.querySelector('#canvas-fluid')))