【代码习惯】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(){...}
}