实战Vue：ToDoList

代码 运行效果

深度监视

1. 概念：为了发现对象内部值的变化，可以在选项参数中指定 deep: true ；注意监听数组的变动不需要这么做
2. 方法使用
   第一个handler：其值是一个回调函数；即监听到变化时应该执行的函数
   第二个是deep：其值是true或false；确认是否深入监听（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
   第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数

插槽使用

1. 概念：和 HTML 元素一样，我们经常需要向一个组件传递内容，Vue 自定义的 元素可以很愉快的帮助我们实现
2. 方法使用：子组件通过slot预留插槽，父组件通过name关键字进行插槽。
   
   

注意/知识点

1. 将界面分割成不同的组件后，如果CSS不好分割，可以将CSS定义为全局的，将其放在assets文件夹，并在main.js中引入
   
2. 如果使用props通信，需要一层层向下传递todos数据，非常繁琐。同时，数据回传也需要一层层回传。
   App.vue

List.vue

Item.vue
   
3. 为li标签绑定事件，控制删除按钮是否显示
   
   
   
4. 动态绑定CSS样式
   
   
5. window.confirm确认弹窗
6. 绑定回车事件
   
7. javascript中reduce方法
   reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
   reduce() 可以作为一个高阶函数，用于函数的 compose。
   注意: reduce() 对于空数组是不会执行回调函数的。
   语法：
   array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
   |参数 |描述|
   |-|-|
   |function(total,currentValue, index,arr) |必需。用于执行每个数组元素的函数。|
   |initialValue |可选。传递给函数的初始值|
   函数参数:
   |参数 |描述|
   |-|-|
   |total |必需。|初始值, 或者计算结束后的返回值。
   |currentValue |必需。|当前元素
   |currentIndex |可选。|当前元素的索引
   |arr |可选。|当前元素所属的数组对象。
8. 数据持久化本地化localstorage&sessionsstorage
9. 自定义事件
   子组件绑定传递给父组件的时间
   
   父组件绑定监听回调事件
   

改造代码——使用vuex 代码

代码结构

知识点

1. stroe.js的拆解
   
   mutations-type用来约束mutations和actions之间的操作
   index.js