vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

@[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进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》：使用vue脚手架创建项目

5.vue2知识点：数据代理

6.vue2知识点：事件处理

7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

8.vue2知识点：计算属性与监听属性

9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）

10.vue2知识点：非单文件组件和单文件组件

11.vue2知识点：组件is属性

12.vue2知识点：组件模板定义

13.vue2知识点：组件的props属性、非props属性、props属性校验

14.vue2知识点：组件自定义事件

15.vue2知识点：组件插槽分发

16.vue2知识点：动态组件

17.vue2知识点：混入

18.vue2知识点：浏览器本地缓存

19.vue2知识点：全局事件总线（GlobalEventBus）

20.vue2知识点：消息订阅与发布

21.vue2知识点：nextTick语法

22.vue2知识点：Vue封装的过度与动画

23.vue2知识点：路由

24.vue2知识点：vm调用待$命令介绍

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新增编辑按钮

33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结