Vexip-UI中DatePicker组件v-model:formatted-value的使用注意事项

问题背景

在使用Vexip-UI的DatePicker组件时，开发者可能会遇到一个常见场景：需要同时获取日期的时间戳值和格式化后的字符串值。组件提供了v-model和v-model:formatted-value两个绑定属性来实现这一需求，但在与Form组件配合使用时，可能会遇到重置表单时格式化值未被清空的问题。

问题重现

当开发者按照以下方式使用DatePicker组件时：

<DatePicker 
  type="date" 
  value-format="yyyy-MM-dd" 
  v-model="formModel.date"
  v-model:formatted-value="formModel.date_f"
/>

在表单中选择日期后，date(时间戳)和date_f(格式化字符串)都会有值。但点击FormReset按钮重置表单时，只有date会被重置，而date_f保持不变。

技术原理分析

这个问题源于Vexip-UI的设计理念：

1. 数据驱动视图：所有数据变化都是受控的，组件状态完全由传入的props/v-model控制

2. FormReset的语义：FormReset的作用是"重置"而非"清空"，它会将表单值恢复到初始状态，而不是简单地置空

3. 分离设计：value和formatted-value被设计为两个独立的属性，前者始终表示时间戳，后者表示格式化后的字符串

解决方案

方案一：使用FormReset的onReset事件

<FormReset @reset="handleReset"/>

在reset事件处理函数中手动清空格式化值：

function handleReset() {
  formModel.date_f = ''
}

方案二：提交时转换格式

更推荐的做法是在提交表单时进行格式转换：

function handleSubmit() {
  const submitData = {
    ...formModel,
    date: format(formModel.date, 'yyyy-MM-dd')
  }
  // 提交submitData
}

Vexip-UI提供了@vexip-ui/utils中的format方法，可以方便地进行日期格式化。

设计哲学探讨

为什么Vexip-UI不将value和formatted-value合并为一个属性？这主要基于以下考虑：

1. 类型安全：保持value始终为时间戳类型，有利于TypeScript的类型推断

2. 可控性：组件内部对时间值的解析更加可控和稳定

3. 灵活性：格式化操作可能不是双向可逆的，分离设计给予开发者更大灵活性

最佳实践建议

1. 对于简单场景，可以直接在提交时进行格式转换

2. 对于复杂表单，可以维护一个空数据的副本用于快速重置

3. 理解"重置"和"清空"的语义差异，根据实际需求选择合适的处理方式

4. 充分利用Vexip-UI提供的工具函数，如format等，简化开发工作

通过理解这些设计理念和掌握正确的使用方法，开发者可以更高效地使用Vexip-UI的DatePicker组件构建日期选择功能。