Vue 中的组件缓存
一、介绍
先来看一个问题?
从首页的区块链模块切换到文章详情页面,再从文章详情页面回到首页,我们发现首页重新渲染原来的状态没有了,又回到了推荐模块。
首先,这是正常的状态,并非问题,路由在切换的时候会销毁切出去的页面组件,然后渲染匹配到的页面组件。
但是我想要某些页面保持状态,而不会随着路由切换导致重新渲染。
二、解决方案
使用 keep-alive 缓存组件
官方文档:在动态组件上使用 keep-alive
主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
(1)组件缓存不是持久化,它只是在应用运行期间不会重新渲染,如果页面刷新还是会回到初始状态。
(2) 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
(3) 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。
(4)组件生命周期钩子和缓存
(5)include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b"><component :is="view"></component>
</keep-alive><!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
三、项目中的缓存配置
参考链接:
https://juejin.im/post/5d22f0f3f265da1b94216d0b
问题描述:
我们希望
登录成功后,就把缓存给清除掉,让组件重新进行渲染。
等页面渲染完成后,再给页面加上缓存(keep-alive)
实现思路:给keep-alive 的include属性绑定一个动态的数组,因为keep-alive只会缓存include数组中的组件
首页在Vuex容器中定义这个动态数组cachePages:
然后,在用户登录成功之后,清除layout组件的缓存:
这样就解决了上面提到的,用户1登录后退出登录,使用用户2的账号登录时,”我的“页面的个人信息展示的还是用户1的个人信息的问题。
但是此时,layout组件没有缓存,当登录的用户从区块链频道点击 某篇文章 -> 进入文章详情页面后,再返回到首页时,首页会重新进行渲染,无法回到之前用户所在的区块链频道,而是直接变成首页渲染成功后默认显示的推荐频道。
为了解决这个问题:我们可以在layout组件的渲染完成之后,给它加上缓存。
解决缓存带来的列表滚动位置问题:
就是列表滚动的位置没有缓存下来,也就是用户在首页的 区块链模块的文章列表滚动了一段距离后,进去文章详情页面,再返回到首页时,页面确实还在区块链模块,但是列表滚动的位置又回到了列表顶部。
layout切换到文章详情页面,触发activated生命钩子:
文章详情页面切换到layout,触发deactivated生命钩子:
Vue 中的组件缓存相关推荐
- vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用,详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个 详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
- vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法
1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good ...
- vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
- Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
- 通过大头儿子和小头爸爸,给女朋友讲明白了vue中父子组件的传值
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- Vue中父子组件的六种通信方式
Vue中父子组件的通信方式 一.Props + $emit Props:父传子 父组件Parent.vue: <Child :message="message" @chang ...
- ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式 问题 历程 UploadList 组件源码 h() 方法 实现 注 问题 技术:vue.ant design vue 在开发项 ...
- 深刻理解Vue中的组件
今天看了下Vue官网上关于组件的教程,感觉内容还挺多,现在把组件中基本的知识梳理一下. 组件的基本使用 注册组件 注册组件就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传 ...
最新文章
- c++将小数化为二进制_C/C+学习笔记:C语言实现任意进制转换,代码全解析!...
- QT的QUrl类的使用
- python使用install_用 python setup.py install 安装 matplotlib 报错
- 关于PHP下载文件功能中header()书写方式
- 语音识别是什么意思_语音识别的翻译_音标_读音_用法_例句_爱词霸在线词典
- 比较两个时间的大小 举例:CompareDate(12:00,11:15)
- 算法四:回溯和分支界定
- 脚本的使用与修改Tampermonkey(油猴)
- keil5安装教程简单易上手
- html flv jquery 插件,基于js与flash实现的网站flv视频播放插件代码
- 六、Sails中执行存储过程模拟Waterline的Create插入数据
- SCSI设备:SCSI接口图片说明
- js 幻灯片放映图片_如何制作数据库驱动的首页幻灯片放映
- 关于 厦门“怪虫” 的一点感概
- 哥德巴赫猜想程序(C语言)
- 使用决策树预测大盘指数
- DBus的理解与应用
- 产品经理与研发经理的分工
- 逆向学习QQ机器人——辅助资料
- 什么app能和PC端同步工作?手机电脑同步工作助手软件试试云便签
热门文章
- 进程控制块包含的信息
- java手动切换成独立显卡_JAVA设计模式之调停者模式
- cv mat的shape_pybind11—opencv图像处理(numpy数据交换)
- python处理ini文件_python对ini配置文件处理
- 关于未捕获异常的处理(WPF)
- 如何确定VS编译器版本--_MSC_VER || #if _MSC_VER 1000 #pragma once #endif
- linux select shell,linux之shell编程select和case用法
- mysql 优化之 is null ,is not null 索引使用测试
- web存储机制localStorage和sessionStorage
- 第一站---大连---看海之旅