Vue的缓存组件详解

大学生小郑

于 2024-07-24 00:05:24 发布

阅读量241

点赞数 6

文章标签： vue

本文链接：https://blog.csdn.net/m0_74948742/article/details/140586902

版权

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习Vue的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，小郑打算在这个暑假的第一个月学习完Vue从0到1实现项目，希望广大网友一起监督学习，互相进步!

缓存组件

1.问题

从面经列表点到详情页，又点返回，数据重新加载了 → 希望回到原来的位置

2.原因

当路由被跳转后，原来所看到的组件就被销毁了（会执行组件内的beforeDestroy和destroyed生命周期钩子），重新返回后组件又被重新创建了（会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子），所以数据被加载了

3.解决方案

利用keep-alive把原来的组件给缓存下来

4.什么是keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。

优点：

在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，

减少加载时间及性能消耗，提高用户体验性。

App.vue

<template>
  <div class="h5-wrapper"> 
   <keep-alive>    
  <router-view></router-view>  
  </keep-alive>  
</div>
</template>

问题：

缓存了所有被切换的组件

5.keep-alive的三个属性

① include ：组件名数组，只有匹配的组件会被缓存

② exclude ：组件名数组，任何匹配的组件都不会被缓存

③ max ：最多可以缓存多少组件实例

App.vue

<template>
  <div class="h5-wrapper">
    <keep-alive :include="['LayoutPage']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

6.额外的两个生命周期钩子

keep-alive的使用会触发两个生命周期函数

activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发

deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了actived 和deactived钩子，帮我们实现业务需求。