10.1 列表展示怎么做
当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。
如果希望scoped样式中的一个选择器能够作用得“更深”，可以使用/deep/或::v-deep（后者可以被sass认出来）操作符
由于Types组件是外部的，li是Types组件的元素，因此scoped作用不到li元素上，因此需要使用::v-deep深入到.x里面的组件元素
那如果组件里有多个li时，想要精准控制，则需要在前面添加前缀
表驱动形式：如果后面是真则要selected这个clss ES6新语法，如果key里面有变量，可以用中括号包起来，此处classPrefix就是变量
制作三栏切换
新建组件Tabs.vue
从数据源获取数据
遍历数据源获取数据，并设置选中事件
声明通用类型
设置class当前的value正好等于选中的value
Tags.vue可以调整为通用组件，让class有两个类
将数据源模块化
Object.freeze不能修改地址，还不能修改内容
则无需Type.vue组件可删除
10.2 用JS配置height
10.3 用列表展示数据
使用computed将List（数组）和type(收入、支出）、interval(按天、周、月)（两个string）结合起来组成一个新的列表（trees）
获取recordList,渲染数据，展示列表result
根据时间分组
此时发现不知道createdAt的类型是什么，recordList的类型是any
而之前已经声明了recordList的类型是RootState
这是一个bug,Vuex在得到store的时候，它不能将类型正确的返回
在全局中声明类型
现在recordList就有了类型，createdAt类型还没有
是因为这个原因造成的
JSON.parse没有保证parse的类型是左右一致的
JSON不支持Date,JSON支持的类型:双引号括起来的字符串（string）、数值(number)、true、false、null、对象（object）或者数组（array）
所以Date会默认转成string
从而可以获取日期和时间
遍历result
要给group添加标题
10.4 添加CSS
10.5 ISO8601 和 dayjs
ISO8601
任何有一个时间通过toISOString()就可以得到一个标准的ISO格式的时间
如果想把这个字符串再变成时间
Date.parse会得到一个数字，再将这个数字传给new Date就会得到一个新的日期对象
day.js是moment.js的缩小版
Day.js 安装
yarn add dayjs
//加一天
//减一天
dayjs().add(1, 'day')
dayjs().subtract(1, 'day')
10.6 数据排序
数据排序
遍历对象的时候，key是没有办法保持顺序的，所以要将result改成一个数组,再进行排序
sort会改变原来的数组因此先clone一下
clone后面是any类型，调整为给传什么类型就返回什么类型
10.7 数据排序后分组
先将得到的数组进行排序，然后将第一个数组放入result里，遍历后面排序好的数组，将当前的数组和result里最后一个数组的item进行比较，如果相同（是不是同一天）就push到last一组里,如果不相同就push到result里
10.8 完成统计页面
区分收入和支出
显示总数
forEach是没有返回值的map
此时发现amount的是字符串，修复bug
this.output是一个字符串，事件emit没有办法指定第二个参数的类型
