Vue 之 <keep-alive>

背景

性能优化，会缓存不活动的组件实例，而不是销毁它们。
主要用于保留组件状态或避免重新渲染。

Props

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

注意点

• 和 <transition> 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
• 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

项目中使用

• 使用方法：用<keep-alive> 包裹需要缓存的组件。
• 注意点：keep-alive 包裹的动态组件或 router-view 会缓存不活动的实例，再次被调用这些被缓存的实例会被再次复用，对于我们的某些不是需要实时更新的页面来说大大减少了性能上的消耗，不需要再次发送HTTP请求，但是同样也存在一个问题就是被 keep-alive 包裹的组件我们请求获取的数据不会再重新渲染页面,所以项目中，我们需要去控制哪些组件要刷新，哪些组件不刷新。

方法一：利用include、exclude属性

<keep-alive include="bookList1, bookList2">
    <router-view></router-view>
</keep-alive>

<!-- ↓ 或者 -->

<keep-alive exclude="indexList1">
    <router-view></router-view>
</keep-alive>

• include 属性表示只有name属性为 bookList1，bookList2 的组件会被缓存（注意是组件的名字，不是路由的名字）, 其它组件不会被缓存。
• exclude 属性表示除了name属性为 indexList1 的组件不会被缓存，其它组件都会被缓存.

方法二：利用meta属性

路由配置：

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home/Home.vue'
import HelloWorld from '../views/home/HelloWorld.vue'
Vue.use(VueRouter)

const routes = [
 {
  path: '/',
  name: 'home',
  components: Home,
  meta: {
    keepAlive: true //需要被缓存的组件
 },
 {
  path: '/helloWorld',
  name: 'HelloWorld',
  components: HelloWorld,
  meta: {
     keepAlive: false //不需要被缓存的组件
 }
]

const router = new VueRouter({
  routes
})

export default router

页面配置：

<template>
  <transition name="fade-transform" mode="out-in">
    <keep-alive :include="cachedViews">
      <router-view :key="key" />
    </keep-alive>
  </transition>
</template>
<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews // 过滤 keepAlive 为 true 的数组
    },
    key() {
      return this.$route.path // 这里绑定key，因为当路由变化时（例如：切换用户，访问同一页面时），强制组件刷新
    }
  }
}
</script>

*更多router-view key相关请看： https://www.cnblogs.com/huangtq/p/16012610.html

参考资料

https://cn.vuejs.org/v2/api/#keep-alive
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化