简易任务清单

简单任务清单（TodoList）

1、功能介绍

分三部分：头部添加事项；内容区域显示事项并操作事项；尾部统计事项完成情况以及处理事项功能

2、功能展示

3、功能亮点

（1）computed计算属性

        computed: {
            //计算已勾选事项数量
            completeSize() {
                return this.todo.reduce((preTotal, item) => preTotal + (item.complete ? 1 : 0), 0)
            },
            //是否全选
            isAllSelected: {
                get() {
                    return this.todo.length === this.completeSize && this.todo.length
                },
                //点击全选则所有事项都被勾选的事件
                set(check) {
                    this.selectAllItems(check)
                }
            }
        }

（2）获取浏览器数据库数据并实时保存，判断localStorege中所取数据为空时，就取空数组字符串形式，因为外部有json格式的转化

        data() {
            return {
                //事项列表从浏览器数据库中获取
                todoList: JSON.parse(window.localStorage.getItem("todo_ist") || '[]')
            }
        },

(3) 实时保存数据到浏览器中（以json格式保存数据）

		watch:{
            todoList: {
                deep: true,
                handler(newVal) {
                    window.localStorage.setItem("todo_ist", JSON.stringify(newVal))
                }
            }

（4）数组方法的使用

reduce 定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数解释
total：必需；计算结束后的返回值
currentValue: 必需；当前元素
currentIndex: 可选；当前元素的索引
arr: 可选；当前元素所属的数组对象

举例
preTotal即为最终要计算出的数值，当数组内每个对象的complete为true时，preTotal加1，最终计算得出整个事项列表中已完成的数量

completeSize() {
  return this.todo.reduce((preTotal, item) => preTotal + (item.complete ? 1 : 0), 0)
},

4、源代码

https://github.com/Demo996/TodoList.git

5、总结

项目虽小，但是整体写下来还是有收获的，例如pros传数据的写法从简到复杂可有有三四种；props可以传Function类型；以及数组函数的使用；计算属性的理解。不积跬步无以至千里，不积小流无以成江海。不断总结才能真正进步。