vuex为什么要存在?它与浏览器缓存的区别? 面试被怼得哑口无言的题之一 我只能反复讲着vuex能干嘛。。语言苍白无力555~
加粗样式 文章思路(回答思路)按 vuex和浏览器存储介绍 => 共同点 => vuex解决了浏览器存储什么问题 => 浏览器自己的优势 => 总结
Vuex和浏览器存储
Vuex:
- Vuex是vue的生态系统提供的一个插件,用来进行数据的状态管理,也就是集中管理项目公共数据
浏览器存储:
- 包含了三种存储模式 cookie、localStorage、sessionStorage
- cookie是由服务器端写入的,cookie的生命周期是由服务器端在写入的时候就设置好的
- SessionStorage、 LocalStorage都是由前端写入的,LocalStorage是写入就一直存在,除非手动清除,SessionStorage是页面关闭的时候就会自动清除。
共同点
- 二者都可以对数据进行存储,也可以方便使用和操作全局数据
- 特别是当需要存储的数据在关闭页面时都需要进行销毁,采用vuex或者sessionStorage似乎都可以得到一样的目的
vuex解决了浏览器存储什么问题
- vuex可以监听数据的变化。当vuex数值发生变化时,其他组件处可以响应式地监听到该数据的变化,当数据改变时,项目中引用到该数据(并且正在监听的)的地方都会发生改变
- 可以存储任意形式的数据。浏览器存储中,数据只能以字符串的形式传入,对于不是string格式的数据需要采用
JSON.parse() 和JSON.stringify() 去读写 - 可以进行模块化存储。使用moudle模块化开发,可以对存储数据进行归类,避免存储内容过于臃肿
- 没有数据存储大小限制。vuex是存储在内存中的,而storage存储在本地中,有一定的存储大小限制(cookie 4K,localStorage、sessionStorage 5M)存储内容过多会消耗内存空间,导致页面变卡。
- 暂时没想到了
浏览器自己的优势:
- 灵活控制存储数据时长。vuex是一旦关闭网页就失去数据的存储的,但是如果想要让数据长久的/关闭网页不被清空时,使用localStorage可以达到效果。
总结:
vuex的出现,确实为公共数据的管理带来了极大的方便。较为突出的便是它的数据监听响应,这是浏览器没办法去实现的一个功能。 但是浏览器存储也有自己的优点,在进行数据存储时,首先思考数据对于项目的一个意义,来决定存储的方式。 比如说token的存储,并不希望在页面关闭时就清空,此时采用浏览器存储更为合适。 可能还有一些其他的用法,有选择的将vuex和浏览器存储起来 比如可以用于在刷新页面vuex数据初始化的问题,因为在页面刷新的时候vuex会重新加载数据会初始化,可以在设置vuex的同时设置storage当刷新页面时如果vuex被初始化拿不到数据时可以使用缓存中记录的数据
参考: https://www.codeleading.com/article/8950325214/ https://www.jianshu.com/p/5bda2dd07f16
|