说起Vue，你得明白，数据缓存可是大有用处，能省去好多网络请求，让APP运行更顺畅。Vue帮我们简化了这个过程，提供了计算属性（computed）来处理。只要在Vue组件里定义好你想保存的数据属性，然后依靠计算属性轻松取出数据就可以了！要是有缓存数据摆在眼前？那当然是立刻拿来使用，免得白费力气去多次请求数据，这样网站的响应速度自然飞快无比！
我们在Vue组件中，先设置一个可以存放缓存数据的”cachedData”，让它帮你保存从网络请求得到的数据。然后，创建一个叫做computed的变量来获取并返回这些数据。这个computed变量会检查一下本地缓存中有没有这份数据，有的话就直接拿出来，没有的话，它就会自己上网去捞数据，收到后再放到本地缓存中。
每次用这个模板，都会检查下缓存里有没得数据，实在找不到才上网搜。这么干能让我们拿到最新的消息，还能减少好多无谓的联网请求，网页加载更快，你用起来也就更爽！
二、数据本地存储
除了临时存储点儿数据外，有时候还得在用户电脑上留点数据比如为了保存时间长点或者多页面共同享用。Vue这儿有个叫localStorage的小助手让咱们这么做滴。好，就把需要留下的数据往 localsStorage里一放，然后组件里随处取用！简单明了？妥妥儿搞定了那些需要一直呆在那儿的数据，比如说用户信息之类的~
想要让Vue组件里的”username”能存取本地，你得这么干：在”create”那玩意儿里，找到Local Storage的”username”数据，给咱组件的”username”也填充上；这样的话，不管是你输入的还是登陆后拿到的用户名信息，都会留在组件里了哟~
data() {
return {
userList: [], // 需要缓存的数据
};
},
就是这么简单，在组件一启动，马上就能从浏览器里抓取到用户名，就像变魔法一样把它交给username变量了。有啥问题要同步更新浏览器信息不？别担心，咱有watch这个神器，盯着username设定的变化，一旦有新动态，立马更新储存在本地。所以不管你怎么查看这些信息，都是一个样儿哦；而且最关键的，就是那些重要的用户信息，都藏在浏览器里面绝对安全！
三、利用sessionStorage进行临时性本地存储
computed: {
cachedUserList() {
// 如果缓存中已有数据，直接返回缓存数据
if (localStorage.getItem("userList")) {
return JSON.parse(localStorage.getItem("userList"));
} else {
// 如果缓存中没有数据，发送网络请求获取数据
// 并将数据缓存到本地存储
axios.get("/api/userList").then((res) => {
this.userList = res.data;
localStorage.setItem("userList", JSON.stringify(res.data));
});
return this.userList;
}
},
},
怎么能只看到localStorage？其实sessionStorage也很常用，处理短暂状态或者在多个页面间分享数据特别好用。不像localStorage这么持久，用过就清零。
记住，你可以通过’sessionStorage.setItem'(关键词，值)的方式将钥匙跟锁孔存到Session存储中；取的时候，直接’sessionStorage.getItem'(关键词)提交个请求，立马就能找到相应的钥匙对应的锁孔！这么一整，你那些短期内要用的临时数据就不用担心了，至于长期保存，就交给时间~
四、使用Vuex管理全局状态
想要做好大个儿APP？先弄清楚状况，别把所有状态都搞得乱七八糟。这时候，你需要用上Vuex这个牛逼的工具。有了它，各个小零件们的状态安安静静的，处理信息和应付变动也是井井有条！
- {{ user.name }}
在 Vuex 这玩意儿里，你能用 store 的 state 部分存储大家都看得见的变量数据，用 mutations 记录一些同步变化的过程，而 actions 则是一览无余的异步行为，主要负责调用mutations去改变状态喽！
用 Vuex统管全部状态的话，用props传参数或用event bus传消息就不怕乱套！省心又好修。还能应对以后的变动和完善。
五、结合axios实现网络请求与响应拦截
做Vue项目，得上网，还要收发信息。有Axio，这个库特好用，能帮助我们在网页和Node.js上发HTTP请求接收回复。而且还是个支持Promise功能的小帮手！
用axios这货，你就能方便地下传GET、POST这样的HTTP请求了，而且还有拦截功能。比如，让页面先显示加载画面，或者处理所有统一的错误消息，甚至在登陆时检查token（验证码），都能轻松搞定！
有了axios跟Vue的组合，网上冲浪嗖嗖的，还有全局报错处理和加载效果一键解决！
六、使用插件扩展功能
// 保存数据到本地存储
localStorage.setItem("username", "John");
// 从本地存储中获取数据
const username = localStorage.getItem("username");
console.log(username); // 输出：John
说到前端界的大神Vue框架，你在做项目的时候肯定用过一些神器来加速或者提高效率？比如那个vue-router，就能轻松帮你搞定浏览器里面的页面跳转；还有element-ui，这个东西就是个快速创建炫酷网页界面的利器；最后但同样重要的是vuex-persistedstate这个插件，它能保证你的Vuex状态不会因为刷新而消失。
装个插件就能让我们项目快速拥有好多棒棒哒功能！这不就让我们的工作速度飙升，节省开销？再加上，还能从插件大牛那儿学点设计妙招和方法，项目变得更靠谱！
七、优化性能提升用户体验
data() {
return {
username: "", // 需要保存到本地存储的数据
};
},
除了我们之前提过的那些技巧外，其实对于Vue项目还能有更多优化方式！比如可以试试图像懒加载，让它更快；也可以借助CDN服务器加快访问速度；再来就是用路由懒加载或代码分割优化来提升页面的速度与美观度。
想要网页飞快运行？别忘了用好浏览器的缓存功能、减少HTTP请求数。还有，试试SSR这种高大上的技术，效果可是杠杠滴！不停地调优页面性能，使用者自然会爽到飞起!
八、总结与展望
created() {
this.username = localStorage.getItem("username");
},
总的来说，搞Vue项目，了解数据缓存和本地储存那是必须滴。比如利用计算属性和localStorage来管理网页或全局状态，让所有人都看得明明白白；配上Vuex，就可以把全局状态收拾得妥妥当当；再用上axios库，HTTP请求简直不要太轻松；最后，一些插件扩展啥的，还能让咱的项目更加灵活，升级起来也更方便了。不过，别忘了咱们还要注意性能问题，这样才能够提升用户体验！
期待将来的前端技术能给我们带来更多惊喜喔？特别希望我们这些前端小伙伴们能用最新潮的方法来编出更棒的Web应用！
评论0