vue中keepAlive组件的作用和使用方法详解

显示全部楼层

前言

在面试的时间，很多面试官再问vue的时间可能就会提一嘴，你知道keep-alive有什么作用吗？
keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时间，默认会进行烧毁，假如有需求，某个组件切换后不进行烧毁，而是保存之前的状态，那么就可以使用keep-alive来实现
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
复制代码

我这里使用脚手架创建项目后会天生home和about两个组件，而且通过路由进行切换
home组件

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

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>
复制代码

我在home组件中写了一个input输入框
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中keepAlive组件作用和使用方法的文章就先容到这了,更多相干vue中keepAlive组件使用内容请搜刮草根技术分享从前的文章或继续欣赏下面的相干文章渴望各人以后多多支持草根技术分享！

工作时间

工作时间

vue中keepAlive组件的作用和使用方法详解

本帖子中包含更多资源

火星云矿 | 预约S19Pro，享500抵1000！