关于前端:代码习惯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(){...}
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理