分类：keep-alive

2021
07-26

LRU算法在Vue内置组件keep-alive中的使用

目录vue的keep-alive内置组件的使用也是使用了改算法，源码如下：实现一个自己的LRU算法另一种vue的keep-alive内置组件的使用也是使用了改算法，源码如下：exportdefault{name:"keep-alive",//抽象组件属性,它在组件实例建立父子关系的时候会被忽略,发生在initLifecycle的过程中abstract:true,props:{//被缓存组件include:patternTypes,//不被缓存组件exclude:patternTypes,//指定缓... 继续阅读 >

2021
07-02

vue中keep-alive组件的用法示例

问题描述（什么是keep-alive）keep-alive顾名思义，保持活跃。保持谁活跃呢？首先我们知道，因为vue就是组件化编程，一个.vue文件就是一个组件。就像万事万物一样，都有从出生到消亡的生命周期过程，vue的组件也是一样，也有自己的生命周期，比如create创建组件、mounted往组件上挂数据、update更新组件上挂的数据，destroy把组件实例销毁。所以使用keep-alive就是保持组件活跃，不会被destroy销毁掉，就一直还活着，... 继续阅读 >

2021
04-27

Vue 内置组件keep-alive的使用示例

keep-alive是Vue内置的组件之一，主要用于保留组件状态或避免重新渲染。作用   在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。一、keep-alive用法<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。当组件在<kee... 继续阅读 >

2021
01-26

vue keep-alive的简单总结

一、作用主要用于保留组件状态或避免重新渲染。二、用法<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive> 是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。三、Propsincludeinclude -... 继续阅读 >

2021
01-21

从源码角度来回答keep-alive组件的缓存原理

今天开门见山地聊一下面试中被问到的一个问题：keep-alive组件的缓存原理。官方API介绍和用法<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。当组件在<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。官网的例子是tab切换保存了... 继续阅读 >

2020
12-02

keep-alive保持组件状态的方法

keep-alive的设计初衷有些业务场景需要根据不同的判断条件，动态地在多个组件之间切换。频繁的组件切换会导致组件反复渲染，如果组件包含有大量的逻辑和dom节点，极易造成性能问题。其次，切换后组件的状态也会完全丢失。keep-alive的设计初衷就是为了保持组件的状态，避免组件的重复渲染。为什么keep-alive可以直接使用开发者无需注册和引入，直接可以在模板中使用。跟开发者使用Vue.component自定义的组件不同，keep-alive无需... 继续阅读 >

2020
11-03

vue缓存之keep-alive的理解和应用详解

官方解释：<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。当组件在<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。keep-alive是Vue的内置组件，在组件切换过程中将状态保留在内存中，等再次访... 继续阅读 >

2020
10-30

解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况

需求：项目中需要开发一个导航栏，类似浏览器的导航，没有关闭的时候页面缓存，关掉之后，页面随之销毁。（如图）项目是使用Vue+Vue-Router+Vuex刚开始使用的方法是：关闭导航标签，直接调用对应的页面的$destory()方法，OK，可以实现关闭页面（下次再打开该页面，将初始化）的功能，但是遇到个问题：该页面将不再被缓存，也就是说切换导航tab时，页面将不断的被初始化！！！查了一下文档，找了度娘，没发现解决方法，又去请教... 继续阅读 >

2020
10-30

vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作

前言最近在做一个精品课程后台管理系统，其中涉及文件上传和文件列表展示，我不想将他们写入一个组件，故分开两个组件实现，但由于上传文件需要时间，这时要是用户切换别的组件查看时，上传文件组件就销毁了，导致文件上传失败，所以需要采取keep-alive技术实现不销毁上传文件组件，同时也由于系统模块较多，所以需要多组件进行嵌套。问题：多组件嵌套下如何指定对应的一个或多个组件存活呢？*tips：要是对于Vue使用keep-alive的基... 继续阅读 >

2020
10-30

vue使用keep-alive实现组件切换时保存原组件数据方法

前言最近在做一个精品课程后台管理系统，其中涉及文件上传和文件列表展示，我不想将他们写入一个组件，故分开两个组件实现。问题：但由于上传文件需要时间，这时要是用户切换别的组件查看时，上传文件组件就销毁了，导致文件上传失败。追求效果：想利用keep-alive实现上传组件切换时仍继续上传文件，而其他组件则不会存活。使用keep-alive的过程普通方法：直接使用keep-alive<keep-alive><router-view/></keep-alive>效果：虽然... 继续阅读 >

2020
10-30

vue内置组件keep-alive事件动态缓存实例

在App.vue文件中配置<keep-alive><router-viewv-if="$route.meta.keepAlive"></router-view></keep-alive><router-viewv-if="!$route.meta.keepAlive"></router-view>在路由中配置{path:'/backstage',component:resolve=>require(['@/views/backstage/my'],resolve),meta:{keepAlive:false}},{path:'/backstage/info',component:resolve=>require(['@/views/backstage/my/info'... 继续阅读 >

2020
10-09

Vue中keep-alive组件的深入理解

前言最近在写Vue项目的时候，遇到了一个问题，我从A路由使用parmas方式传参跳转到B路由，然后从B路由跳转到C路由，再从C路由返回B路由的时候，发现从A路由传到B路由的参数已经不存在了。正文我们都知道，vue组件进行路由跳转时，会销毁当前组件。所以从其他路由返回当前路由时，当前路由会重新执行生命周期钩子函数。这就导致了上述问题，A路由传到B路由的参数没了。当遇到这种问题的时候，我们会首先想到，我们能不能让B路由的数... 继续阅读 >

2020
10-08

vue中keep-alive、activated的探讨和使用详解

在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就createmountupdate和destory这几个东东么，怎么多了个activate出来。百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。keep-alive<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一... 继续阅读 >

2020
10-08

Vue中keep-alive的两种应用方式

Vue中keep-alive的使用我总结的有两种方式应用：首先简述一下keep-alive的作用，kee-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候，默认会销毁，当重新切换回来时又重新初始化。现在有需求切换回来不销毁组件，保持原来的状态，此时用keep-alive就可以实现了我创建了两个组件，可以相互切换组件1：组件2：第一种方式在组件1的路由中添加meta:{keepAlive:true},也就是当前路由需要缓存此时路由设置完毕，keep-... 继续阅读 >

2020
10-08

keep-Alive搭配vue-router实现缓存页面效果的示例代码

Vue工程中有些页面需要有缓存。这个功能通过keep-alive组件实现，keep-alive组件可以使被包含的组件保留状态，或避免重新渲染。在routes.js中定义路由，在路由中定义元信息(meta字段)，需要缓存的页面就需要在meta对象中定义一个字段，这里设置为keepAlive，设置为true，反之，则不缓存。{path:'/a',component:()=>import('@/pages/A'),meta:{title:'A',keepAlive:true}},{path:'/b',component:... 继续阅读 >

2020
09-27

vue中keep-alive内置组件缓存的实例代码

需求：home组件中有一个name的data数据。这个数据修改之后，再切换到其他的组件。再切换到home组件，希望home中name这个值是之前修改过的值。希望组件有缓存。keep-alive的使用方式：将要缓存的组件使用keep-alive包裹住即可。keep-alive优点的介绍：1.切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。2.切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的重新创建呢）3.会多出两... 继续阅读 >