谈谈你对 keep-alive 的了解？

Posted 2020-11-28 rivend

 

在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。

 

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：

• 一般结合路由和动态组件一起使用，用于缓存组件；
• 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
• 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

 1.通常用来包裹组件使用，本身没有意义，不会产生任何可视的元素，与component一起使用

<keep-alive>
    <component :is="view"></component>
</keep-alive>

 

2.在包裹组件时可以默认缓存组件，所谓缓存组件是指组件会保持一个状态不变，而不会在切换时重新挂载渲染等

3.props: [include, exclude, max]

• include：  指定缓存的组件，其中指定的是组件的name
• exclude： 指定不缓存某个组件，其中指定的是组件的name
• max：      指定最多缓存多少组件，达到最大值的时候会把最开始缓存的替换掉

 

4.上面缓存可以结合路由来缓存页面

<keep-alive>
    <router-view></router-view>
</keep-alive>

 

5.在keep-alive包裹下的组件可能会有两个钩子函数被触发

activated：       当前组件处于焦点状态时会触发当前钩子，被缓存的组件可以用此来替代mounted（组件不会重新挂载）。

deactivated：   当前组件失去焦点状态时触发。

实例：

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

 

结合router，缓存部分页面

使用$route.meta的keepAlive属性：

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

 

需要在router中设置router的元信息meta：

//...router.js
export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘Hello‘,
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: ‘/page1‘,
      name: ‘Page1‘,
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

 

 

• keep-alive用法

• <keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
• <keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中
• 当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行