keep-alive的作用以及使用方法

keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用keep-alive来实现

我这里利用脚手架创建项目后会生成home和about两个组件,并且通过路由进行切换

home组件

<template>
  <div class="home">
    <input type="text">
  </div>
</template>

<script>
//  此处的@符号表示目录 src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

about组件

<template>
  <div class="about">
    <input type="text">
  </div>
</template>
<script>
export default {
  name:"about"
}
</script>

同样在about组件也放了一个输入框
在这里插入图片描述
当我们在home组件的输入框输入一些内容的时候,然后切换到about组件,在切换回home组件,我们会发现之前输入的内容被清空了,其实也容易理解,就是当切换到about组建的时候,home组件就被销毁了,输入框的值自然被清空了
在这里插入图片描述
在home组件写了destroyed生命周期函数

当切换到about组件的时候home组件的destroyed就触发了,所以home组件被销毁了
那么此时我们就可以利用keep-alive组件进行包裹router-view组件,将不活动的组件缓存起来

App组件

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <keep-alive>
      <router-view />
    </keep-alive>
    
  </div>
</template>

写完之后会发现当切换到about组件时,home组件中的destroyed并没有触发,并且home组件的值也保存了下来
在这里插入图片描述
但是这样也肯定不好,我们会发现,about组件的值也被缓存了,就是所有的路由组件都被缓存了,严重浪费性能,而且也不符合需求,我们现在只想缓存home组件

在keep-alive上有两个属性

字符串或正则表达式。只有匹配的组件会被缓存。

include 值为字符串或者正则表达式匹配的组件name会被缓存。
exclude 值为字符串或正则表达式匹配的组件name不会被缓存。
首先利用include实现,匹配到组件中定义的name,将进行缓存

<keep-alive include="home">
   <router-view />
</keep-alive>

在这里插入图片描述
我们会发现home已经被缓存了,但是about没有被缓存

而exclude就是排除了,这个就不在演示了,很简单,除了这个我们还可以利用路由中的meta属性来控制

{
      path: '/',
      name: 'home',
      meta:{
        keepAlive:true
      },
      component: Home
    }

将home的路由规则钟的meta添加keepAlive属性为true,也就是当前路由组件要进行缓存

keep-alive代码可以结合v-if进行包裹,如果meta中的keepAlive为true进行缓存,否侧不进行缓存,这样可以更灵活一些

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

这样组件的缓存是实现了,但是还是会有一些问题,就是因为组件被缓存,并没有被销毁,所以组件在切换的时候也就不会被重新创建,自然也就不会调用created等生命周期函数,所以此时要使用activated与deactivated来获取当前组件是否处于活动状态

我在home组件里面写入了activated与deactivated生命周期函数

activated(){
    console.log("哎呀看见我了")
    console.log("----------activated--------")
  },
  deactivated(){
    console.log("讨厌!!你又走了")
    console.log("----------deactivated--------")
  }

在这里插入图片描述
通过上面的gif图相信已经看得很清楚了,此时keep-Alive也就差不多了

### 使用 Vue `keep-alive` 组件 为了有效利用 `keep-alive` 提升应用性能,开发者可以在需要缓存的组件外层包裹 `<keep-alive>` 标签。此操作可以让被包裹的组件在切换时保留其状态而不必重新渲染。 #### 基础语法结构 最简单的使用方式如下所示: ```html <keep-alive> <component :is="currentComponent"></component> </keep-alive> ``` 这里展示了如何通过动态组件属性 `:is` 来指定当前要显示哪个组件[^4]。 #### 结合路由使用 对于单页面应用(SPA),通常会结合 Vue Router 进行路径导航。此时可以通过设置特定条件来决定是否启用 `keep-alive` 缓存机制。例如,在某些情况下仅对部分页面开启缓存功能: ```javascript // router/index.js 配置文件片段 { path: '/example', component: Example, meta: { keepAlive: true } // 自定义meta字段表示该页面需缓存 } ``` 接着可在模板内依据路由对象中的 `meta.keepAlive` 属性判断是否套用 `keep-alive`: ```html <router-view v-if="$route.meta.keepAlive" /> <keep-alive> <router-view v-if="$route.meta.keepAlive"/> </keep-alive> <!-- 对于不需要缓存的情况 --> <router-view v-if="!$route.meta.keepAlive"/> ``` 上述代码实现了基于路由配置灵活管理哪些视图应该被缓存的功能[^5]。 #### 控制缓存行为 除了基本的应用之外,还可以进一步定制化 `keep-alive` 的工作模式。比如限定最大缓存量、排除不想缓存的内容等。以下是几个常用的参数选项: - **include**: 字符串或正则表达式形式的一组名称,只有匹配到的名字才会被缓存; - **exclude**: 同样接受字符串/正则作为输入,但作用相反——凡是符合条件的对象都不会进入缓存池; - **max**: 数字型参数,用来设定最多可保存多少个已缓存实例;超出限额后最早加入的那个将会被淘汰掉。 实际编写时像这样写入 HTML 模板里即可生效: ```html <keep-alive :include="'special-component'" max="10"> <!-- 动态组件或其他内容 --> </keep-alive> ``` 以上便是有关 Vue 中 `keep-alive` 组件的一些常见应用场景及其具体实现方法
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值