@[toc]
概述
前面文章案例已经练习了父子组件之间的通信,这一节讲述如何把todos数组放进本地缓存中,因为实际开发场景中频繁查询的数据很有可能会用到本地缓存技术。
<font color='red'>思考:</font>如何改成使用本地缓存,是写一堆按钮每次触发就是往本地缓存种get和set?答案是错误的,因为太复杂了会写一堆的get和set方法
<font color='red'>正确答案:</font>使用监听watch属性,因为只要监听到数据改变 =》 往本地缓存种添加监听改变后的数据就行,这样就能实现本地缓存的更新。
前端代码
App.vue 只写了代码不同的地方
export default {
data() {
return {
//由于todos是MyHeader组件和MyFooter组件都在使用,所以放在App中(状态提升)
todos:JSON.parse(localStorage.getItem('todos')) || []
}
},
watch: {
todos:{
deep:true,
handler(value){
localStorage.setItem('todos',JSON.stringify(value))
}
}
}
}
<font color='red'>注意点1:</font>该案例只是把之前Todo-list案例的数组放到本地缓存中保存
<font color='red'>注意点2:</font>handler(value)中因为我们只用到新值,所以只写一个value即可,省略了oldValue,之前的长这样handler(newValue, oldValue)
<font color='red'>注意点3:</font>默认网站会把todos数组自动调用.toString()方法,会导致本地缓存中保存的值为[Object Object],所以需要JSON.parse()方法转换
<font color='red'>注意点4:</font>
问题:为啥JSON.parse()最后要拼接个“|| []”?
<font color='red'>答案:</font>当todos没有任何一条记录时,执行JSON.parse(localStorage.getItem('todos'))其值为null,而下方组件MyFooter.vue会继续使用todos.length就会导致报错,所以采用拼接“|| []”,依据是 null || [] 输出表达式值为 [],即||前方有值就返回该值,如果||前方为null,则整体表达式值为[]
<font color='red'>注意点5:</font>
问题:使用watch监听后,新增和修改按钮为啥能实现本地缓存的新增和删除?
<font color='red'>答案: </font>因为watch监听的是整个todos,而handler(value)中的value就代表改变值后的todos,只需要把todos重新设置到本地缓存中,就实现了本地缓存的更新操作。
<font color='red'>注意点6:</font>
问题:为啥watch要开启深度监听?
<font color='red'>答案:</font>因为默认watch监听的是浅层次的,即todos保存的是对象,而用户在勾选每一项时如果不开启深度监听,就会导致用户每次勾选时并不会修改本地缓存中的数据checked状态,从而用户刷新时页面就变回之前没勾选的状态了,所以为了保持监听数据一致性必须开启深度监听。
本人其他相关文章链接
1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)
9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)
13.vue2知识点:组件的props属性、非props属性、props属性校验
16.vue2知识点:动态组件
17.vue2知识点:混入
19.vue2知识点:全局事件总线(GlobalEventBus)
23.vue2知识点:路由
25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)
26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
27.vue2基础组件通信案例练习:待办事项Todo-list案例练习
28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存
29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线
31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布
32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。