keep-alive使用注意事项

最新推荐文章于 2024-11-05 14:52:16 发布
原创 最新推荐文章于 2024-11-05 14:52:16 发布 · 276 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Vue中使用keep-alive组件时，从一个需要缓存的页面跳转到不需要缓存的页面时，deactivated钩子函数的执行情况。通过具体代码示例，展示了selectGoodsList.vue组件中的deactivated()函数与menu_page.vue组件中的mounted()函数的调用顺序。

1 deactivated的执行

问题现象：

keep-alive的列表页 跳转到 不需keep-alive的菜单页时，

selectGoodsList.vue

 deactivated(){
      console.log("list-deactivated");
    },

menu_page.vue

mounted(){
      console.log("menu-mounted");
    },

从 /list到/menu 打印结果如下：

Vue el-tabs使用 keep-alive 不生效
努力搬砖的小码
04-25 871
Vue el-tabs使用 keep-alive 不生效
vue2中的keep-alive使用总结及注意事项
11-30
keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。 基本使用如下： <!-- 该组件将被缓存！ --> 一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页 有两个情况： 1. 直接点击浏览器的后退返回按钮。 2. 点击导航栏中的 /list的链接返回。 那么针对第一种情况下，我们直接通过后退按钮
keep-alive的使用及注意点
热门推荐
xiasohuai的博客
08-30 1万+
以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。（在开发Vue项目的时候，有一部分部分组件是没必要多次渲染的） keep-alive属性：include - 字符串或正则表达式。只有匹配的组件会被缓存。exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。 用法： 缓存动态组件： &lt;keep-alive&gt;包裹动态组件时，会缓存不活动...
keep-alive的使用注意点
wh20141212的博客
01-07 222
项目中存在组件之间的切换问题，Vue 中有个「动态组件」的概念，它能够让我们更好的实现组件的切换。 在实际的项目开发中，产品是不可能放过我们的，需求总是在不停的变化，如果你碰到那些不改需求的产品就嫁了吧，太难得了。 最近项目中需要实现一个保留上一次Tab 页的功能。如下图，当我选择 B 组件时，我希望从首页切换到设置页时，还会停留在 B 组件，而不是重新渲染为默认的 A 组件。 首先我们可以使用内...
vue3页面缓存keep-alive的使用和需要注意的问题（页面不缓存）
weixin_46526589的博客
03-23 3788
vue3页面缓存keep-alive的使用和需要注意的问题（页面不缓存）
吐血整理 ＜ keep-alive ＞ 知识，包括使用方法，缓存机制，史上最全
m0_61603704的博客
03-02 2798
keep-alive 知识总结，包括使用方法，缓存机制
vue中keep-alive组件的入门使用教程
12-10
`<keep-alive>`组件的使用注意事项： 1. **基本用法**：将`<keep-alive>`作为动态组件的父元素，它会缓存组件实例，而不是销毁。 2. **`include`和`exclude`属性**：可以设置这两个属性来控制哪些组件应该被缓存。`...
keep-alive的使用-及遇到的问题
qq_20623665的博客
02-15 2108
被keep-alive包括的的组件，当组件切换是不是走销毁流程，而是缓存起来keep-alive有三个参数include匹配name名被缓存，exclude匹配name名不会被缓存，max被缓存组件数量不写，组件默认全部缓存include匹配参数--name指的.vue组件内的name名搭配路由使用-在meta中设置自定义键值对，命名推荐语义化，使用keepAlive。
缓存组件状态，提升用户体验：探索 keep-alive 的神奇世界
你若盛开，清风自来
11-24 1682
keep-alive 是 Vue.js 中的一个组件属性，用于缓存组件的状态和实例，以便在页面重新渲染时能够保留它们。当一个组件被设置了 keep-alive 属性时，它的实例会被保存在内存中，而不是被销毁。这样，当用户在页面中导航到其他路由时，该组件的状态会被保留下来，下次再访问该路由时，组件会直接从缓存中恢复，而无需重新创建实例和初始化状态。通过使用 keep-alive，我们可以在页面中缓存一些需要频繁使用或需要在多个页面之间共享的组件，从而提高页面的切换性能和用户体验。例如。
Vue使用keep-alive缓存路由组件
yh_zeng2的博客
04-13 365
Vue使用keep-alive缓存路由组件
keep-alive标签的使用注意事项及使用场景
friend_ship的博客
11-05 672
keep-alive在router-view标签上的使用方法，注意事项及使用场景的介绍
keep-alive使用的注意点
菜鸟的博客
01-23 2502
使用keep-alive的时候就是把这个组件缓存了，组件不会被销毁，组件的状态会一直存在 使用keep-alive后，mounted生命周期函数不会每次都触发（只有刷新组件的时候才起作用），而vue新增了activated和deactivated函数，所以我们可以在activated函数里执行一些操作，这个时候activated就和没有使用keep-alive时的mounted生命周期函数差...
keep-alive失效原因及解决方案
yougejing的博客
01-10 1万+
keep-alive失效原因及解决方案问题描述失效原因解决方案 问题描述 keep-alive结合路由使用，需要缓存的组件，在路由配置中的meta中添加keep-alive属性 侧边栏二级菜单列表页使用keep-alive缓存，列表页点击进入详情页，再返回列表页，列表页未缓存 失效原因 列表页和另外一个二级菜单列表页共用一个组件，共用方式是在路由配置时component直接指向共用组件listCommon.vue, Vue的就地复用策略导致组件不更新，为了解决切换菜单时listCommon组件更新的问题
关于keep-alive的理解
总结，交流，记录，成长
09-25 1607
关于keep-alive 首次进来 hook 的触发顺序 created-&gt; mounted-&gt; activated，退出时触发 deactivated： // 控制台打印结果 the hook of created is done! the hook of mounted is done! the hook of activated is done! the hook of deac...
umi Ant Design 使用umi-plugin-keep-alive实现KeepAlive状态存储
清风明月的博客
05-08 8909
使用umi-plugin-keep-alive实现KeepAlive状态存储 1、安装 $ npm install umi-plugin-keep-alive --save //或者 $ yarn add umi-plugin-keep-alive 2、使用 import { KeepAlive } from 'umi' const contentList = () => { return ( <> <KeepAlive name="/About" //可按照
https链接在浏览器或微信中打开，https变http的问题
github_38928905的博客
04-12 1万+
问题：在浏览器或微信中， 访问https://gate.demo.cn/web_wx/demo_test，结果页面地址变http://gate.demo.cn/web_wx/demo_test 这个问题有很多现象： 1 微信中访问，https变http导致，支付的时候失败，说未注册 2 导致不同协议两个页面之间本地数据共享失败 解决：地址后面再加一斜杠，如下 https://ga...
keep-alive 使用方法
最新发布
09-26
<think> 我们正在讨论的是Vue中的keep-alive组件，而不是HTTP的Keep-Alive。用户的问题是关于Vue中keep-alive的使用方法。 Vue的keep-alive是一个内置组件，用于缓存不活动的组件实例，以避免重复渲染造成的性能消耗。 根据引用[1]和[4]，我们可以知道： 基本用法：用<keep-alive>包裹动态组件或路由组件，被包裹的组件会被缓存。 动态按需缓存：可以通过条件判断或者路由元信息来控制哪些组件需要缓存。 引用[1]提供了基本用法示例： <keep-alive> <component :is="currentComponent"></component> </keep-alive> 引用[4]提到了动态按需使用keep-alive的场景，例如在路由中根据条件缓存某些页面。 因此，回答将围绕Vue中keep-alive的使用方法展开，包括基本用法、参数以及动态缓存策略。 注意：引用[2]和[3]是关于HTTP的Keep-Alive，与当前问题无关，可以忽略。 另外，用户上次的问题是关于Vue3的hook和Vue2的mixins，但这次问题切换到了keep-alive，因此我们需要专注于keep-alive。 </think> ### Vue.js 中 Keep-Alive 的使用方法详解 #### 一、基本概念 Keep-Alive 是 Vue.js 的内置组件，用于缓存**不活动组件**的实例，避免重复渲染： ```vue <keep-alive include="Home,Profile"> <component :is="currentComponent"></component> </keep-alive> ``` **核心作用**: 1. 减少组件重复创建/销毁的性能开销 2. 保留组件状态（如表单输入、滚动位置）[^1] 3. 适用于频繁切换的 Tab 页或路由视图[^4] --- #### 二、基础用法 ##### 1. 包裹动态组件 ```vue <template> <keep-alive> <component :is="activeComponent"></component> <!-- 动态组件缓存 --> </keep-alive> </template> ``` ##### 2. 包裹路由视图 ```vue <template> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" /> <!-- 路由组件缓存 --> </keep-alive> </router-view> </template> ``` --- #### 三、进阶控制参数 | 参数 | 作用 | 示例 | |------------|----------------------------------------------------------------------|------------------------------------------| | `include` | 匹配组件名称进行缓存 | `include="Home,Profile"` | | `exclude` | 排除指定组件不缓存 | `exclude="Login"` | | `max` | 限制最大缓存实例数 (LRU算法淘汰) | `:max="5"` | | 正则匹配 | 使用正则表达式匹配组件名 | `:include="/Home|Profile/"` | | 数组匹配 | 使用数组指定缓存组件 | `:include="['Home', 'Profile']"` | --- #### 四、动态按需缓存（高级场景） 结合路由元信息实现精准控制： ```js {4-6} // router.js const routes = [ { path: '/product/:id', component: ProductDetail, meta: { keepAlive: true } // 标记需要缓存的组件 } ] ``` ```vue {7} <!-- App.vue --> <template> <router-view v-slot="{ Component, route }"> <keep-alive :include="cachedViews"> <component :is="Component" :key="route.meta.usePathKey ? route.path : undefined" /> </keep-alive> </router-view> </template> <script> import { ref, watch } from 'vue' import { useRoute } from 'vue-router' export default { setup() { const cachedViews = ref(new Set()) const route = useRoute() watch(route, (to) => { if (to.meta.keepAlive) { cachedViews.value.add(to.name) // 动态添加缓存 } }) return { cachedViews } } } </script> ``` **场景说明**： - 首页 → 列表页（缓存）→ 详情页（不缓存） - 详情页 → 列表页（读取缓存）→ 首页（读取缓存）[^4] --- #### 五、生命周期钩子 被缓存的组件会触发特有钩子： ```vue <script> export default { activated() { // 组件激活时调用（从缓存恢复） console.log('组件被激活') }, deactivated() { // 组件停用时调用（进入缓存） console.log('组件被缓存') } } </script> ``` --- #### 六、注意事项 1. **内存管理**： - 避免缓存大型组件（如图表页面） - 使用 `max` 属性限制缓存数量[^1] 2. **数据更新**： - 使用 `:key` 强制更新缓存组件 - 在 `activated` 中刷新异步数据 3. **路由守卫**： - `beforeRouteLeave` 守卫仍会触发 - `beforeRouteEnter` 只在初次创建时触发 > 最佳实践：对高频访问但数据更新少的页面（如用户中心）使用缓存[^3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值