小例--vue的todolist
知识点
1.v-on事件
.keyup，从特定键触发时才触发回调，可以通过键别名或代码绑定;
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
.dblclick//双击时触发
.blur//失焦时触发
2.computed取值get,设置set,默认get，更多解读小例音乐盒
3.vm.$nextTick( [callback] )，DOM 更新循环之后执行调延
4.vm.$refs,功能类似于getElementsByTagName,前者返回数组，后者返回类数组
.在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
.如果用在子组件上，引用就指向组件实例：
.$refs 只在组件渲染完成后才填充，并且它是非响应式的。
5.,根据条件找到某项，或某项下标，接收一个回调函数
.find()//返回第一个符合条件的元素，不符合undefined
.findIndex()//返回第一个符合条件元素的下标，不符合-1
6.window.onhashchange=function(){}//监测hash变化时触发
7.localStorage.getItem（取缓存数据）localStorage.setItem（存数据）
.localStrorage存储的是文本
.JSON.stringify()//存的时候要将string转为json字符串
.JSON.parse()//取的时候要将json转为可用的对象
8.vm.$watch(prop，function(newVal，oldVal){})//
.第一个参数为监控的属性名或属性的路径
.常用写法
.深度监控（没有深度监控的话，对miaov的监控监测不到a的变化）；
功能
1. 增
2.全选
3.删除，从当前下标开始，删除一个
4.双选进入编辑状态，自动获取焦点
5.编辑完成，编辑完成为空时移除，编辑取消
6. 根据hash不同，过滤渲染的数据
a. 全部任务
b. 完成的任务
c. 未完成的任务
7.存储数据
思考
1.编辑函数，修改数据后马上获取焦点无效果
原因：数据修改了，但是DOM还没来的及更新，焦点在dom没更新前就聚焦了，因此更新后没效果
解决：vm.$nextTick（）
2.前者只能监控到list变化，但是list下的checked监控不到
转用深度监控
3.当编辑为空时，并enter完成编辑时，会同时触发enter和blur事件，也就是editDone会执行两次
eg：
li a
li b
li c
第一种情况：li上没有唯一key值，dom结构就地复用
清空enter第一个li ：a被删
第一次editDone执行removeTodo（‘li a'），执行splice（0，1），li a消失，此时就地复用规则使 得li b顶替了li a的位置
第二次editDone执行，由于li b内容不为空，不执行删除
清空enter最后一个li：bc同时被删
第一次editDone执行removeTodo（‘li c'），执行splice（2，1），li c消失,由于是最后一项，所以没有顶替者
第二次editDone执行removeTodo（‘li c'） ，因为li c不存在了返回-1，执行splice（-1，1），最后一项li b被删除
第二种情况：li上有唯一key值，dom结构不复用
清空enter第一个li ：ac被删
第一次editDone执行removeTodo（‘li a'），执行splice（0，1），li a消失，由于key值唯一不就地复用，无人顶替a
第二次editDone执行，由于li 不不存在，执行splice（-1，1），最后一项被删除
其他以此类推
解决：优化
1.获取焦点由原生js方法
升级=》vm.$refs
2.判断hash值为那种情况，用if else
升级=>存个对象，三个中哪个存在就叫哪个，不存在的直接为all
3.过滤list，用switch
升级=>再次升级filterArr对象，存hash，筛选共用