【vue】keep-alive的用法及详解

原理

我们知道vue是通过vnode实现保存节点的，而keep-alive本身也是通过保存vnode来实现缓存的，而不是直接存储DOM结构。其实就是将需要缓存的VNode节点保存在this.cache中，在render时,如果VNode的name符合在缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染

作用

keep-alive组件是vue2.0提供的一个缓存组件，在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

效果

keep-alive组件，只要将子组件嵌套在这里面就可以实现组件的缓存，当页面返回时数据不会丢失，实现了我们常见的历史页面不刷新的效果

参数Props

include - 类型字符串、数组以及正则表达式，只有匹配的组件会被缓存

exclude - 类型字符串、数组以及正则表达式，匹配的组件不会被缓存

max - 类型字符或者数字，可以控制缓存组件的个数，缓存组件的最大值

// 只缓存组件name为a或者b的组件
<keep-alive include="a,b"> 
  <component />
</keep-alive>
​
// 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)
<keep-alive exclude="c"> 
  <component />
</keep-alive>
​
// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>
​
// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>

生命周期的变化

1.activated

• 在 keep-alive 组件激活时调用
• 该钩子函数在服务器端渲染期间不被调用
• 使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

activated(){
    /** 
     * 缓存的组件点击时调用
    */
  },

2.deactivated

• 在 keep-alive 组件停用时调用
• 该钩子函数在服务器端渲染期间不被调用
• 被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

deactivated(){
    /** 
     * 缓存的组件点击时调用
    */
  },

小知识点

1、同时使用include，exclude，那么exclude优先于include

2、缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件

3、keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例

4、keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称

5、只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated这两个函数钩子！另外，在服务端渲染时，此钩子函数也不会被调用

用法

1、与include结合使用

// include 只缓存组件名字为home的组件，其他组件不会缓存，而exclude恰好相反
<keep-alive include="home">
   <router-view />
</keep-alive>

2、结合Router中的meta属性来控制组件缓存

{
      path: '/',
      name: 'home',
      meta:{
        keepAlive:true // 需要缓存
      },
      component: Home,
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
        	keepAlive: false // 不需要缓存
      	  }
        }
      ]
    }

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

缓存所有页面：

       在app.vue页面里加keep-alive

缓存部分页面：

      1、在app.vue页面里加keep-alive，结合keep-alive的include属性

      2、结合Router中的meta属性，在app.vue页面里加$route.meta.keepAlive的if判断