vue添加的监听事件无法移除

Question

vue里面用了keep-alive缓存

在A页面添加了一个滚动监听window.addEventListener('scroll'（）=>{})

因为用了缓存，beforeDestroy()，destroyed()，这两个方法就用不了。

然后我在app.vue里面写了个监听路由的,判断路由,离开了A页面就取消滚动监听事件window.removeEventListener('scroll',()=>{})

然后测试了一下，发现取消监听没反应，有没有大神知道怎么做？望指教一下

Answer 1

使用了 keep-alive, 离开A页面时，因为组件没被销毁，被缓存起来了，所以不会调用 beforeDestroy 和 destroyed 钩子。
在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated：
activated：在 keep-alive 组件激活时调用
deactivated：在 keep-alive 组件停用时调用

当首次进入组件时：

• beforeRouteEnter > beforeCreate > created > mounted > activated > ... ... > beforeRouteLeave > deactivated

再次进入组件时：

• beforeRouteEnter > activated > ... ... > beforeRouteLeave > deactivated

所以可以通过组件内导航守卫结合activated，deactivated来设置添加或取消监听

Answer 2

deactivated这个生命周期

Answer 3

beforeDestroy 用不了可以用页面里的路由导航。

---

app.vue 里面移除的监听回调应该跟添加的不是同一个函数，所以移除无效。

Answer 4

组件内导航守卫，beforeRouteEnter进入时设置监听，beforeRouteLeave离开时取消监听