vue组件缓存

1.keep-alive是什么

•    keep-alive是Vue提供的一个（抽象）组件

2. keep-alive 在vue中起到什么作用

先来看看官网对keep-alive的一些功能说明：

组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

就可以使用到keep-alive，它可以用来进行动态组件的缓存

组件复用，提高性能
缓存不太使用的组件，而不是直接销毁

涉及到的两个钩子函数

activated：激活，当组件在keep-alive内被切换时，进入组件触发

deactivated：缓存，当组件在keep-alive内被切换时，离开组件触发

注意点：

<keep-alive> 只能用在只有一个子组件的情况。如果你在其中有 v-for 则不会产生效果

3. keep-alive 控制组件是否缓存

在实际项目开发的时候，我们可能需要具体的某个项目可以进行缓存，那么如何通过keep-alive来实现呢？

keep-alive的参数有以下三种：

include: [String,RegExp,Array] 只有匹配到的组件才能进行缓存

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

exclude：[String,RegExp,Array] 匹配到的组件都不缓存

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

max： [String,Number] 数字，最多能缓存多少组件实例。在新实例创建之前，缓存中最就没有使用的实例会被销毁

4. 利用meta属性进行组件缓存

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

怎么缓存当前的组件？缓存后怎么更新？

缓存组件使用keep-alive组件，这是一个非常常见且有用的优化手段，vue3中keep-alive有比较大的更新，能说的点比较多。

思路

1. 缓存用keep-alive，它的作用与用法
2. 使用细节，例如缓存指定/排除、结合router和transition
3. 组件缓存后更新可以利用activated或者beforeRouteEnter
4. 原理阐述

---

回答范例

1. 开发中缓存组件使用keep-alive组件，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

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

2 . 结合属性include和exclude可以明确指定缓存哪些组件或排除缓存指定组件。vue3中结合vue-router时变化较大，之前是keep-alive包裹router-view，现在需要反过来用router-view包裹keep-alive：

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component"></component>
  </keep-alive>
</router-view>

---

3. 缓存后如果要获取数据，解决方案可以有以下两种

beforeRouteEnter：在有vue-router的项目，每次进入路由的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
  next(vm=>{
    console.log(vm)
    // 每次进入路由执行
    vm.getData()  // 获取数据
  })
},

actived：在keep-alive缓存的组件被激活的时候，都会执行actved钩子

activated(){
      this.getData() // 获取数据
},

4. keep-alive是一个通用组件，它内部定义了一个map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的component组件对应组件的vnode，如果该组件在map中存在就直接返回它。由于component的is属性是个响应式数据，因此只要它变化，keep-alive的render函数就会重新执行。