Vue多组件监听onresize无效

问题现象：
我在A.vue组件的mounted中设置了window.onresize=function(){...}，页面没有任何报错，但是在浏览器窗口变换时未执行函数。

window.onresize=function(){
    console.log(1)
}

问题原因：
在vue项目中全局搜索了onresize方法，才发现一共三个地方都这样写，其中一个是公共模板组件，导致在A组件中的onresize无效。

所以，如果在vue组件中写onresize（其他监听事件类似），需要这样：

1. 不要多处使用window.onresize，使用window.addEventListener代替；
2. 销毁当前组件前，一定要销毁当前的监听事件；
3. addEventListener和removeEventListener的第二个参数需要保持一致，不然会失效，建议外部函数。

建议代码：

window.addEventListener('resize', this.changeSize)

beforeDestroy() {
  window.removeEventListener('resize',this.changeSize)
},

methods:{
changeSize(){...}
}

优化

ResizeObserver——把监听事件绑到父元素上，而不是window上

官方使用方法与兼容性：https://developer.mozilla.org...

看下打印：会把这个元素的很多信息都返回给你，随便用啦！！！简直不要太方便！快替换去吧~