Vue进阶 | 关于 keep-alive

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

最近在使用路由的时候碰到了一个小问题，起因是是进入某个页面的场景分成了两种方式：

1.直接从菜单进入，不带参数

2.从其它页面跳转路由进入，带参数

而菜单因为页面路由的缓存，从其它页面跳转路由进入后，再次从菜单进入，会自动带参，导致出现问题。

解决方案：

跳转路由刷新当前页面而非所有页面的方式：

const path = this.$route.path // 清除路由缓存
this.$router.push(path) // 重新跳转

注：这里不建议使用重新加载所有页面的方法

面对上述的场景，就需要对Vue中keep-alive的机制有所了解：

keep-alive

先来看看 keep-alive 这个词的含义：保持活性，保持连接。可以理解为：组件实例一直是活跃的状态，不会被轻易销毁。

- 原理：

`<keep-alive>`是`vue`中的内置组件。它可以使组件维持当前状态，不重新进行初始化，减少加载时间及性能消耗

注：它是一个抽象组件，自身不会渲染成一个 DOM 元素，也不会出现在父组件链中

- 实现方式：

<keep-alive include="dashboard,system" > 
    <router-view></router-view>
</keep-alive>

其中 dashboard, system表示可缓存的组件，在项目中，include字段的值往往是一个动态的数据。

• 参数配置：

  • include - 允许缓存的组件实例。类型是 字符串或正则表达式。
  • exclude - 不进行缓存的组件实例。类型是 字符串或正则表达式。
  • max - 可以缓存组件实例的最大数量

• 生命周期钩子

  只有组件被 keep-alive 包裹时，以下这两个生命周期函数才会被调用

  • keep-alive 组件激活时触发：

    activated(){  
      // TODO
    }
    

  • keep-alive 组件停用时触发（即离开路由时）：

    deactivated(){  
      // TODO
    }
    

• 生命周期执行顺序

初次进入时也会触发 activated 和 deactivated：

初次进入&离开： created ---> mounted ---> **activated** --> **deactivated**

非初次进入&离开： activated --> deactivated