问题景象:
我在 A.vue 组件的 mounted 中设置了 window.onresize=function(){…},页面没有任何报错,然而在浏览器窗口变换时未执行函数。
window.onresize=function(){console.log(1)
}
问题起因:
在 vue 我的项目中全局搜寻了 onresize 办法,才发现一共三个中央都这样写,其中一个是公共模板组件,导致在 A 组件中的 onresize 有效。
所以,如果在 vue 组件中写 onresize(其余监听事件相似),须要这样:
- 不要多处应用 window.onresize,应用 window.addEventListener 代替;
- 销毁以后组件前,肯定要销毁以后的监听事件;
- addEventListener 和 removeEventListener 的第二个参数须要保持一致,不然会生效,倡议内部函数。
倡议代码:
window.addEventListener('resize', this.changeSize)
beforeDestroy() {window.removeEventListener('resize',this.changeSize)
},
methods:{changeSize(){...}
}