vue對全局事件的解綁

當咱們在一個組件中對window對象設置事件監聽器（如對scroll事件的監聽），其實這就綁定了一個全局事件，所以在另外一個組件中也能觸發這個事件。

 

場景描述

當我在App.vue中使用了keep-alive標籤，並在某一個組件的activated生命週期鉤子中寫了window.addEventListener(''scroll', this.handleScroll)來設置一個對scroll事件的監聽，卻在另外一個組件中也生效了，這顯然不是想要的結果！

 

解決方案

使用keep-alive的時候其實還有一個生命週期鉤子：deactivated，它會在頁面即將被隱藏或是頁面即將被替換爲新頁面的時候執行。所以能夠在deactivated(){ }中寫入window.removeEventListener(''scroll', this.handleScroll)來解綁該全局事件。