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

谈谈你对 keep-alive 的了解?

时间:2020-04-03 13:57:17      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:详情   bin   列表   使用   页面   字符串   http   org   exclude   

 

在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用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>内被切换,它的activateddeactivated这两个生命周期钩子函数将会被对应执行

 

谈谈你对 keep-alive 的了解?

标签:详情   bin   列表   使用   页面   字符串   http   org   exclude   

原文地址:https://www.cnblogs.com/Rivend/p/12625874.html

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