IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vuex为什么要存在?它与浏览器缓存的区别? -> 正文阅读

[JavaScript知识库]vuex为什么要存在?它与浏览器缓存的区别?

vuex为什么要存在?它与浏览器缓存的区别?
面试被怼得哑口无言的题之一
我只能反复讲着vuex能干嘛。。语言苍白无力555~

加粗样式
文章思路(回答思路)按 vuex和浏览器存储介绍 => 共同点 => vuex解决了浏览器存储什么问题 => 浏览器自己的优势 => 总结

Vuex和浏览器存储

Vuex:

  1. Vuex是vue的生态系统提供的一个插件,用来进行数据的状态管理,也就是集中管理项目公共数据

浏览器存储:

  1. 包含了三种存储模式 cookie、localStorage、sessionStorage
  2. cookie是由服务器端写入的,cookie的生命周期是由服务器端在写入的时候就设置好的
  3. SessionStorage、 LocalStorage都是由前端写入的,LocalStorage是写入就一直存在,除非手动清除,SessionStorage是页面关闭的时候就会自动清除。

共同点

  • 二者都可以对数据进行存储,也可以方便使用和操作全局数据
  • 特别是当需要存储的数据在关闭页面时都需要进行销毁,采用vuex或者sessionStorage似乎都可以得到一样的目的

vuex解决了浏览器存储什么问题

  1. vuex可以监听数据的变化。当vuex数值发生变化时,其他组件处可以响应式地监听到该数据的变化,当数据改变时,项目中引用到该数据(并且正在监听的)的地方都会发生改变
  2. 可以存储任意形式的数据。浏览器存储中,数据只能以字符串的形式传入,对于不是string格式的数据需要采用JSON.parse()JSON.stringify()去读写
  3. 可以进行模块化存储。使用moudle模块化开发,可以对存储数据进行归类,避免存储内容过于臃肿
  4. 没有数据存储大小限制。vuex是存储在内存中的,而storage存储在本地中,有一定的存储大小限制(cookie 4K,localStorage、sessionStorage 5M)存储内容过多会消耗内存空间,导致页面变卡。
  5. 暂时没想到了

浏览器自己的优势:

  1. 灵活控制存储数据时长。vuex是一旦关闭网页就失去数据的存储的,但是如果想要让数据长久的/关闭网页不被清空时,使用localStorage可以达到效果。

总结:

vuex的出现,确实为公共数据的管理带来了极大的方便。较为突出的便是它的数据监听响应,这是浏览器没办法去实现的一个功能。
但是浏览器存储也有自己的优点,在进行数据存储时,首先思考数据对于项目的一个意义,来决定存储的方式。
比如说token的存储,并不希望在页面关闭时就清空,此时采用浏览器存储更为合适。
可能还有一些其他的用法,有选择的将vuex和浏览器存储起来
比如可以用于在刷新页面vuex数据初始化的问题,因为在页面刷新的时候vuex会重新加载数据会初始化,可以在设置vuex的同时设置storage当刷新页面时如果vuex被初始化拿不到数据时可以使用缓存中记录的数据

参考:
https://www.codeleading.com/article/8950325214/
https://www.jianshu.com/p/5bda2dd07f16

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-29 18:55:53  更:2022-06-29 18:58:38 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/11 10:48:26-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码