码迷,mamicode.com
首页 > 其他好文 > 详细

vue之keep-alive的使用

时间:2019-11-10 09:35:30      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:版本   激活   include   size   nts   信息   字符   one   ber   

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 // 需要被缓存
      }
    }
  ]
})

 

 

生于忧患,死于安乐

vue之keep-alive的使用

标签:版本   激活   include   size   nts   信息   字符   one   ber   

原文地址:https://www.cnblogs.com/jingxuan-li/p/11828776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!