vue中keep-alive组件使用

最新推荐文章于 2021-04-14 20:42:12 发布

曾泳锋

最新推荐文章于 2021-04-14 20:42:12 发布

阅读量109

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44795287/article/details/113856806

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中的keep-alive组件，它用于缓存子组件，避免频繁渲染导致性能下降。通过设置max属性限制缓存数量，例如max=10，当超过限制时会销毁最早进入缓存的组件。include和exclude属性允许通过正则表达式控制哪些组件应该被缓存，从而实现更精确的渲染策略。

摘要由CSDN通过智能技术生成

在这里插入图片描述
keep-alive组件是可以用来缓存组件，避免重复渲染需要频繁
渲染的组件

//顶多支持10个组件的缓存，超过10个，则会销毁之前第一个缓存的组件
<keep-alive :max="10">
<频繁切换的子组件>
</keep-alive>

include和exclude一般传入的是正则表达式根据表达式是否进行渲染

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

曾泳锋

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue中keep-alive组件的入门使用教程

12-10

Vue.js中的`<keep-alive>`组件是一种非常实用的功能，用于在组件切换过程中保持组件的状态，避免每次切换都重新创建和销毁组件实例。这在处理需要维持数据或状态的复杂应用时尤其有用，例如音乐播放应用中保持播放...

vue中keep-alive的使用和详细解释

qq_35191845的博客

12-29

6543

一、keep-al是干什么的ive是什么。跳转 keep-alive是vue的内置组件，是用来包裹动态组件的，它会缓存不活跃的组件，keep-alive是一个比较抽象的组件，它自己不会渲染dom节点，也不会出现在父组件链中。二、keep-alive的功能。在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。三、keep-alive的使用方法。 1.动态组件使用:component &l...

参与评论您还未登录，请先登录后发表或查看评论

keep-alive中max的使用

Dream

12-17

3331

现有一个系统A通过Iframe集成到t其他系统B中。而A系统使用了keep-alive。如果A系统单独运行是有小标签的，关闭小标签，就不缓存关闭的组件，而现在集成到B系统中，那么我打开一个页面就等于缓存一个页面，而又无标签关闭，导致在IE浏览器中卡死，现在就解决这个。方案一：B系统关闭标签通过postMessage 信息传递到A系统，让A系统自己调用关闭标签栏的动作，其实就是配合exclu...

vue的keep-alive组件清除缓存

风雪夜过客的博客

01-16

8702

场景是，从列表跳转到详情页，再次返回列表页时要记住之前列表页的页码、搜索关键词等，采用keepa-live缓存组件。在路由文件配置meta.keepAlive: { path: '/List', name: 'List', component: List, meta: { keepAlive: true } } 修改App.vue的router-view： <keep...

对keep-alive组件的理解

WindRunnerMax

08-23

1196

对keep-alive组件的理解当在组件之间切换的时候，有时会想保持这些组件的状态，以避免反复重渲染导致的性能等问题，使用<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。描述重新创建动态组件的行为通常是非常有用的，但是在有些情况下我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来，此时使用<keep-alive>包裹组件即可缓存当前组件实例，将组件缓存到内存，用于保留组件状态或避免重新渲染，和<transition>相

Vue自带的组件keep-alive

zhoulib__的博客

10-23

347

Vue中的所有的组件都是有声明周期的，从出生到消亡，一般要经历8个声明周期或者6个，声明周期就是钩子函数。出现的原因和使用的场景如果有一个组件我要重复使用，但是我要重复切换组件，那这个组件就不断的重复消亡和出生，这说上去就很麻烦，然后可能是Vue的开发者也觉得麻烦（这样很浪费内存，就算渲染的是虚拟DOM也很浪费），就出现了<keep-alive></keep-alive&gt...

vue组件 keep-alive 和 transition 使用详解

01-19

1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件...

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

01-19

将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...

vue中install方法

热门推荐

weixin_44795287的博客

02-20

2万+

vue提供install可供我们开发新的插件及全局注册组件等 install方法第一个参数是vue的构造器，第二个参数是可选的选项对象 export default { install(Vue,option){ 组件指令混入挂载vue原型 } } 全局注册组件 import PageTools from '@/components/PageTools/pageTools.vue' import update from './update/index.vue' import Ima

vue中通过ref调用子组件的方法

weixin_44795287的博客

01-04

4173

vue中通过ref调用子组件的方法在父组件中的子组件定义ref属性 <add-dept ref="add" :isadd.sync="isAdd" :data="node" @updataNumber="getInfo" /> 父组件利用ref调用子组件里面的方法 edit(node) { this.isAdd = true this.node = node this.$nextTick(() => { this.$refs.add

vue3配置404页面

weixin_44795287的博客

04-14

1202

vue2中的（*）不适用于vue3 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Home from '../views/Home.vue' import noFind from '../views/404.vue' import loginRegiter from '../views/loginRegiter.vue' const routes: Array<RouteReco

Vue的mixin的全局混入和局部混入

weixin_44795287的博客

01-08

692

在vue项目中如果全局需要某项逻辑可以使用mixin进行全局混入

Vue基础

weixin_44795287的博客

12-30

653

Vue基础 day1 Vue的现状最新版本： Vue 3.0 1、核心代码完全重构（TypeScript） 2、速度更快 3、体积更小 vue的基本使用方法 1.引入vue.js <script src="./vue.js"></script> 2.定义模板 <div id="app"></div> 3.vue初始化 const app = new Vue({ // 告诉我Vue生效位置，给一个dom id值，或者class //el 挂

vue中计算属性computed中get跟set的区别

weixin_44795287的博客

02-18

640

计算属性computed 默认只有getter这个属性，需要用setter再进行设置 computed: { fullName: { // getter 只要值变化就会重新触发这个get返回新的值 get: function () { return this.firstName + ' ' + this.lastName }, // setter这个属性是在监听数据变化时进行其他数据计算的属性 set: function (newValue) {

vue中transition过渡组件

weixin_44795287的博客

02-23

514

在进入/过渡中，主要有6个钩子被触发，并对应6个class的切换 v-enter：进入初始状态 v-enter-active:进入过渡阶段，动画‘播放阶段’ v-enter-to:进入结束阶段，在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 v-leave:离开初始阶段 v-leave-active：离开过渡阶段，动画‘播放阶段’ v-leave-to:进入结束阶段，在元素被插入之后下一帧生效 (与此同时 v-leave 被移除)，在过渡/动画完成之后移除。

vue-admin-teplate模板环境变量

weixin_44795287的博客

02-19

413

我们可以在这两个文件中设置全局变量，进行使用例如开发时我们可以在vue.config.js中设置我们开发服务器的端口号在开发环境变量文件中设置port ，在vue.config.js文件就可使用

vue路由种类

weixin_44795287的博客

01-13

404

vue路由分为声明式路由和编程式路由

vue项目页面根据不同路由从而进行不同过渡动画地跳转

weixin_44795287的博客

02-24

325

在App.vue中 <template> <div id="app"> <transition mode="out-in" :leave-active-class="lac" enter-active-class="animate_animated"></transition> </div> </template>

nuxt基础

weixin_44795287的博客

03-08

287

文件结构生命周期服务端钩子即在服务端运行也在客户端钩子除了beforeCreated跟created，其他vue生命周期在客户端运行获取window跟vue的this得在客户端的这些钩子获取 nuxtServerInit钩子 middleware钩子在nuxt.config.js下的middleware 在layouts下的middleware 在peges下的middleware 三个middleware，执行顺序是nuxt.config.js(全局的)>layouts

Vue2 keep-alive组件详解与优化策略

Vue2中的`keep-alive`组件是一个强大的功能，用于在用户在单个路由之间导航时，保持组件的状态并避免不必要的重新渲染。它有助于提升应用的性能，特别是在处理大量数据或者复杂组件的场景中，可以显著减少服务器和...