使用场景
一般比较简单的变量比如布尔我们会选择使用ref
const a = ref(false)
比较复杂的变量比如对象可以选择使用reactive
const formData = reactive({a:xxx,b:yyy})
本质上没有什么区别，都是代理变量。
选中tag
现在我们要实现能够选取tag。使用v-model来完成。 在Tag组件中添加v-model
进入Tags.tsx组件，props中添加一个selected属性，类型为Number。由于要适配v-model，所以还要加上emits。
添加onSelect事件
可以选择tag了
inputPad组件中 输入日期和数值
思路：依然选择两个v-model来进行双向绑定 定义两个ref分别用来标记记账时间以及记账金额。
并进行v-model
来到inputPad中，props加入这两个属性
所以我们不再需要原有的refDate，可以替代成happenAt，但是我们的new date是字符串，回到time.tsx让其支持字符串类型
触发事件改一下：
在inputPad的上面显示一下当前的时间
Amount金额
做金额不能像时间一样，不能在用户点击过程中就刷新，需要一个中间变量。 先在提交时添加事件，
测试一下：
但是在清零的时候是不能自动回0，需要再点击记账。同时vue也给了个警告，说type不对。
我们需要做一些调整
先把number变成string
提交时把string变回number
成功消除警告。
记账实现
现在已经做好了绝大部分功能，只差点击记账即可把数据记录在服务器了，现在进行实现。
回到ItemCreate，现在还没有监听提交。在InputPad上添加一个submit的监听。
到InputPad中props里面加入onSubmit，
点击记账时触发一下submit事件
在onSubmit中发送请求：
这样子写不好，所以我们用reactive对ref进行一个改写
