一、问题描述

在Vue工程中，添加样式，部分需要做到自适应，需要添加resize事件，由于是单页面应用，如果组件初始化的时候绑定事件，在切换页面的时候不去注销事件，如果来回切换，会让resize事件执行多个函数，迅速消耗CPU,浏览器会出现卡顿的情况

二、解决办法

1. Vue生命周期mounted 添加 resize事件
2. Vue生命周期destroy 删除 resize事件

三、案例

// 定义逻辑函数
function  resizeLogic(){
	console.log(document.documentElement.clientHeight)
}
// 添加 resize 绑定事件
window.addEventListener(
	"resize",resizeLogic,false
);
// 删除绑定的resize事件
function removeResizeAction(){
	window.removeEventListener("resize",resizeLogic);
}

重要的一点是添加的逻辑函数一定要是定义好的函数，而不是“匿名函数”，这样删除的时候就确定是删除那个具体（指针）的函数

四、监听全局的键盘事件

 // 定义逻辑函数
  function  keyLogic(events){
    console.log(events.key);
  }
  // 添加 resize 绑定事件
  window.addEventListener(
    "keydown",keyLogic,false
  );
  // 删除绑定的resize事件
  function removeKeyAction(){
    window.removeEventListener("keydown",keyLogic);
  }

在react 或者Vue 单页面应用中，如果需要监听这种全局事件，就需要加载组件的时候添加事件，离开组件的时候就应该去掉事件。