Vue中使用keep-alive导致mounted和beforeDestroy钩子函数失效

最近在 Vue 项目中给页面加水印，发现了一个比较奇怪的现象，有的页面水印颜色深，有的页面水印颜色浅，特别是在主题色（背景色）很重的页面，水印看起来格外显眼。经 code review 发现页面使用了 组件缓存，导致 mounted 和 beforeDestroy 钩子函数中的方法不能正常被调用。

一、原因

使用了缓存组件 keep-alive 之后，mounted 钩子函数只会在第一次进入页面被调用，之后再次进入不会被触发；而销毁组件的 beforeDestroy 钩子函数不会被执行，除非是主动销毁组件。
这样就会导致，有些页面水印不会被销毁，被重复添加，相当于是同一个地方盖上了两张水印，所以水印看起来很明显。

二、activated 和 deactivated 钩子函数

官方提供的API：

• activated： 被 keep-alive 缓存的组件激活时调用。
• deactivated： 被 keep-alive 缓存的组件失活时调用。

三、beforeRouteEnter 和 beforeRouteLeave 路由守卫

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.name = to.params.name
    next()
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

四、解决方案

可以根据以上两组API来解决 ** keep-alive 导致 mounted 和 beforeDestroy 钩子函数失效** 的问题。

1. 根据 activated 和 deactivated 钩子函数的执行时机，调用水印生成和移除的函数方法。
2. 利用 beforeRouteLeave 路由守卫，在离开该页面时主动销毁组件，相当于主动清除了 keep-alive 的缓存。 （不推荐）

beforeRouteLeave (to, from, next) {
  this.destroy();
  next();
}
1
2
3
4

---

欢迎访问：天问博客