vue面试题:如何保存页面的当前的状态?
如何保存页面的当前的状态?
- 既然是要保持页面的状态(其实也就是组件的状态),那么会出现以下两种情况:
- 组件会被卸载:
- (1)将状态存储在LocalStorage / SessionStorage
- 优点:
- 缺点:
- (2)路由传值
- 优点:
- 缺点:
- 组件不会被卸载:
- (1)单页面渲染
- 优点:
- 缺点:
- 用keep-alive缓存页面
既然是要保持页面的状态(其实也就是组件的状态),那么会出现以下两种情况:
组件会被卸载:
(1)将状态存储在LocalStorage / SessionStorage
只需要在组件即将被销毁的生命周期 componentWillUnmount (react)中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。在这里面需要注意的是组件更新状态的时机。比如从 B 组件跳转到 A 组件的时候,A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候,实际上是希望 B 组件重新渲染的,也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性,用来控制 A 组件是否读取 Storage 中的状态。
优点:
兼容性好,不需要额外库或工具。
简单快捷,基本可以满足大部分需求。
缺点:
状态通过 JSON 方法储存(相当于深拷贝),如果状态中有特殊情况(比如 Date 对象、Regexp 对象等)的时候会得到字符串而不是原来的值。(具体参考用 JSON 深拷贝的缺点)
如果 B 组件后退或者下一页跳转并不是前组件,那么 flag 判断会失效,导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage,会造成很奇怪的现象
(2)路由传值
通过 vue-router 的 Link 组件的 prop —— to 可以实现路由间传递参数的效果。
在这里需要用到 state 参数,在 B 组件中通过 history.location.state 就可以拿到 state 值,保存它。返回 A 组件时再次携带 state 达到路由状态保持的效果。
优点:
简单快捷,不会污染 LocalStorage / SessionStorage。
可以传递 Date、RegExp 等特殊对象(不用担心 JSON.stringify / parse 的不足)
缺点:
如果 A 组件可以跳转至多个组件,那么在每一个跳转组件内都要写相同的逻辑。
组件不会被卸载:
(1)单页面渲染
要切换的组件作为子组件全屏渲染,父组件中正常储存页面状态。
优点:
代码量少
不需要考虑状态传递过程中的错误
缺点:
增加 A 组件维护成本
需要传入额外的 prop 到 B 组件
无法利用路由定位页面
用keep-alive缓存页面
除此之外,在Vue中,还可以是用keep-alive来缓存页面,当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行
被包裹在keep-alive中的组件的状态将会被保留:
<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>
</kepp-alive>
router.js
{path: '/',name: 'xxx',component: ()=>import('../src/views/xxx.vue'),meta:{keepAlive: true // 需要被缓存}
},
相关文章:
vue面试题:如何保存页面的当前的状态?
如何保存页面的当前的状态? 既然是要保持页面的状态(其实也就是组件的状态),那么会出现以下两种情况:组件会被卸载:(1)将状态存储在LocalStorage / SessionStorage优点:缺…...
Java的编程之旅34——Interger包装类
1.API简介 Java的API(Application Programming Interface,应用程序编程接口)是一组提供给程序员使用的代码库,用于开发Java应用程序。Java的API包括了各种类和接口,用于处理输入输出、图形用户界面、网络通信、数据库…...

C# Winform画图绘制圆形
一、因为绘制的圆形灯需要根据不同的状态切换颜色,所以就将圆形灯创建为用户控件 二、圆形灯用户控件 1、创建用户控件UCLight 2、设值用户控件大小(30,30)。放一个label标签,AutoSize为false(不自动调整大小),Dock为Fill(填充),textaglign为居中显示。 private Color R…...

Unity(第十六部)声音和视频
声音 1、听声音 创建相机的时候,相机自带Audio Listener 多个相机的时候,我们只保留一个Audio Listener就可以 2、声音源,环境音 添加Audio Source就行中文叫声音源 3、脚本执行的声音 using System.Collections; using System.Collection…...

Linux(CentOS)学习
一、认识Linux 1、如何修改Linux时区 2、配置固定IP 3、重启网络服务 3、小技巧快捷键 4、环境变量设置 5、Linux文件的上传和下载 6、压缩和解压 二、基础命令 1、目录命令 (1、)查看目录内容(ls) 1、ls //查看当前目录内容 2、- a //显示隐藏内容 3…...
HTML最强入门学习笔记+GitHub小项目源码
HTML学习笔记 GitHub项目链接: 点我跳转GitHub 本博客采用markdown编写,上面这个链接跳转就是采用了html的<a></a>的代码设计的跳转提示~ 1.创建文件可以使用 ! 在VSCode中进行快速补全从而生成一整个HTML结构 HTML组成 <!DOCTYPE html><htm…...

《Spring Security 简易速速上手小册》第4章 授权与角色管理(2024 最新版)
文章目录 4.1 理解授权4.1.1 基础知识详解授权的核心授权策略方法级安全动态权限检查 4.1.2 主要案例:基于角色的页面访问控制案例 Demo 4.1.3 拓展案例 1:自定义投票策略案例 Demo测试自定义投票策略 4.1.4 拓展案例 2:使用方法级安全进行细…...
【java类的使用,及注意事项】
Java类的使用是通过创建对象来调用类的方法和访问类的属性。首先,要在Java中创建一个类,需要使用关键字class,然后给类一个名称,并在代码块中定义类的属性和方法。 例如,下面是一个简单的Java类的示例: p…...
[JSOI2008] 最大数 题解 线段树
[JSOI2008] 最大数 传送门 题目描述 现在请求你维护一个数列,要求提供以下两种操作: 查询操作。 语法:Q L 功能:查询当前数列中末尾 L L L 个数中的最大的数,并输出这个数的值。 限制: L L L 不超过…...
python爬虫之app爬取-charles的使用
专栏系列:http://t.csdnimg.cn/WfCSx 前言 前面介绍的都是爬取 Web 网页的内容。随着移动互联网的发展,越来越多的企业并没有提供 Web 网页端的服务,而是直接开发了 App,更多更全的信息都是通过 App 来展示的。那么针对 App 我们可以爬取吗?当然可以。 App 的爬取相比 …...

神经网络结构——CNN、RNN、LSTM、Transformer !!
文章目录 前言 一、什么是CNN 网络结构 解决问题 工作原理 实际应用 二、什么是RNN 网络结构 解决问题 工作原理 应用场景 三、什么是LSTM 网络结构 解决问题 工作原理 应用场景 四、什么是Transformer 网络结构 解决问题 工作原理 BERT GPT 前言 本文将从什么是CNN࿱…...
mysql 事务的隔离级别
一、事务的隔离级别要解决的问题: 1)脏读:读到了其它事务未提交的数据即脏读,未提交意味着数据有可能会被回滚,也就是最终有可能不会存储到数据库中,即读到了最终不一定存在存在的数据,即为脏读…...
Unity3D 阴影的计算原理详解
前言 阴影是游戏中的重要特效之一,可以增加游戏的真实感和立体感。在Unity3D中,阴影的计算原理主要包括阴影的产生、投影和渲染。 对惹,这里有一个游戏开发交流小组,希望大家可以点击进来一起交流一下开发经验呀! 首…...

【物联网应用案例】从0到N,智慧农业的数据价值
智慧农业全方位渗透到农业的每一个环节,云端解决方案更推动了研究人员、农艺师及农民间的密切协作,为研发企业提供了既经济又具扩展性的完美方案。 据IDC预计,到2036年,农场收集的数据量将增加800%以上,这凸显了农业数…...

文生视频基础1:sora技术报告学习
sora技术报告学习 背景学后理解训练流程技术拆解编码解码扩散模型训练用数据 28号直播交流会后的一些想法自身的一点点想法 参考 原文地址:Video generation models as world simulators 背景 此项目的背景是基于Datawhale的关于sora技术文档的拆解和相关技术讲解…...

Linux第68步_旧字符设备驱动的一般模板
file_operations结构体中的函数就是我们要实现的具体操作函数。 注意: register_chrdev()和 unregister_chrdev()这两个函数是老版本驱动使用的。现在新字符设备驱动已经不再使用这两个函数,而是使用Linux内核推荐的新字符设备驱动API函数。 1、创建C…...

23种设计模式——工厂方法模式
定义: 一个用于创建对象的接口,让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其他子类。 工厂方法通用类图: 这个图更好理解 在工厂方法模式中,抽象产品类Product负责定义产品的共性,实现对事物最抽象的…...

水豚鼠标助手 强大的鼠标美化工具
水豚鼠标助手 水豚鼠标助手是一款 鼠标换肤、屏幕画笔、放大镜、聚光灯、屏幕放大、倒计时功能的强大屏幕演示工具。 软件助手获取 水豚鼠标助手1.0.0 安装教程 第一步:下载后,双击软件安装包 第二步:Windows可能会出现提示弹窗ÿ…...

ArrayList集合源码分析
ArrayList集合源码分析 文章目录 ArrayList集合源码分析一、字段分析二、构造方法分析三、方法分析四、总结 内容如有错误或者其他需要注意的知识点,欢迎指正或者探讨补充,共同进步。 一、字段分析 //默认初始化容量。这里和Vector一样,只是…...

循环队列与循环双端队列
文章目录 前言循环队列循环双端队列 前言 1、学习循环队列和循环双端队列能加深我们对队列的理解,提高我们的编程能力。 2、本文循环队列使用的是数组,循环双端队列用的是双向链表 3、题目连接:设计循环队列 ,设计循环双端队列。 …...

定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...

如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
Docker拉取MySQL后数据库连接失败的解决方案
在使用Docker部署MySQL时,拉取并启动容器后,有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致,包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因,并提供解决方案。 一、确认MySQL容器的运行状态 …...
电脑桌面太单调,用Python写一个桌面小宠物应用。
下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡,可以响应鼠标点击,并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...