vue之keep-alive的使用

Posted 2020-11-29 jingxuan-li

keep-alive：是vue内置的一个组件，可以使被包含的组件保留状态或避免重新渲染。有两个生命周期函数：activated、deachtivated。在vue 2.1.0版本后新增了两个属性：include与exclude。

 

生命周期函数（在服务端渲染时，以下两个钩子函数不会被调用）

　　activated：在 keep-alive 组件激活是调用。如果每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子函数中获取数据的任务

　　deachitivated：在 keep-alive 组件停用时调用。

 

属性

　　include：

　　　　类型：字符串(include="") 或 表达式（使用 v-bind:include=""）

　　　　作用：只有名称匹配的组件才会被缓存

　　exclude（优先级 > include）：

　　　　类型：字符串(exclude="") 或 表达式（使用 v-bind:exclude=""）

　　　　作用：任何名称匹配的组件都不会被缓存

　　max：

　　　　类型：Number

　　　　作用：最多可以魂村多少组件实例

 

组件缓存实例

// 新增一个组件：
export default {
  name: ‘test-keep-alive‘,
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}


// 实例：
<keep-alive include="abc">
    <!-- 将缓存组件名 = abc 的组件 -->
    <component></component>
</keep-alive>

<keep-alive include="a,b">
   <!-- 结合动态组件，将缓存name为a或b的组件 -->
    <component :is="a"></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>

 

页面缓存实例（结合 vue-router）

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


//  在router的index.js中配置 meta 元信息
export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘Hello‘,
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: ‘/page1‘,
      name: ‘Page1‘,
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

 

 

生于忧患，死于安乐