02 | 上手：一个清单应用帮你入门Vue.js

交作业： 仅前端缓存：在unmount组件时，将 组件的 data 存到 localStorage ，mount组件时取出。 如果后端有接口的话，可以在unmount时，同步到后端，挂载时请求接口 考虑用户体验，如果离线在线都可修改，可以考虑给todo的每一项加个最后修改时间，挂载时把本地缓存数据和接口数据合并，当冲突时，只留下最新数据

全选按钮使用 set 和 get 进行处理，真是妙啊。 这一个方法就值了🎫了

思考题：这个涉及到页面状态保存，方法有很多，大概两类： 1. 本地储存： a. localstorage b. workers c. router，也可以存到 route 中 d. 存到本地文件 2. 服务端：这个就是将状态保存到服务器，通过 axios 等方式和服务器交换数据等

交作业 ： 通过watch监听数据变更并存储到localStorage中，然后在mounted时加载数据 watch: { todos: {//监听数据变更 handler(newVal, oldVal) { console.info("todos->change") //TODO::原来是在unmount时才保存的，但unmount代码没有执行，所以换成wathc了，不知道为什么unmount没有执行 localStorage.setItem("todos", JSON.stringify(this.todos)) }, deep: true } }, mounted() { //加载数据 var todos = localStorage.getItem("todos"); if(todos) { this.todos = JSON.parse(todos); } }, unmounted() { //保存数据 localStorage.setItem("todos", JSON.stringify(this.todos)) }, 原来是在unmount时才保存的，但unmount代码没有执行，所以换成wathc了，不知道为什么unmount没有执行

交作业：将数据存入localStorage，刷新时再取出来展现 1.保存：watch一下todoList，变化存入 2.读取：data设置为localStorage中读出的数据

打卡 1. 保存时机，在unmount的生命周期进行保存 2. 使用浏览器客户端存储，如sessionStorage，LocalStorage等api保存，保存时添加时间戳用于比对新老数据，使用服务端保存接口，将数据持久化到数据库，考虑接口请求失败时重试机制和友好提示 3. 客户端存储在在data定义时直接从localStorage等获取，服务端接口在created周期请求获取数据并给data赋值 4.考虑保存失败的情况，可以监听数据变化做自动保存

仅刷新页面，并不会出发unmounted生命周期，在仅刷新页面的场景下可以在created生命周期里监听beforeunload事件，如果有todos，存入localstorage中

{{active}} / {{all}} 这里为什么要做成2个属性而不是直接做个1个属性呢？

目前能想到的持久化方案： 一个是借助后端让数据入库，还有就是 localStorage 这种浏览器本地持久化

在给输入框绑定事件 `addTodo` 时，把 `keydown` => `keyup` 是不是更合适，`keydown` 在按键按下时，会一直触发事件。或者做一个非空判断也可～