window.onresize綁定事件以及解綁事件

問題描述
在Vue工程中，添加樣式，部分需要做到自適應，需要添加resize事件，由於是單頁面應用，如果組件初始化的時候綁定事件，在切換頁面的時候不去注銷事件，如果來回切換，
會讓resize事件執行多個函數，迅速消耗CPU,瀏覽器會出現卡頓的情況

解決辦法
Vue生命周期mounted 添加 resize事件
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 單頁面應用中，如果需要監聽這種全局事件，就需要加載組件的時候添加事件，離開組件的時候就應該去掉事件。

原文：https://blog.csdn.net/hbiao68/article/details/89879661