vue3清楚表单数据

在Vue3中，清理表单数据通常有两种常见的做法：

1. **显式地设置值**：你可以直接通过`v-model`指令的`value`属性将表单字段的值设为空字符串、null 或 undefined，例如：

   <input v-model="clearFormField" type="text">

然后在你的组件内，当需要清空这个字段时，更新 `clearFormField` 的值。

2. **利用ref和触发表单事件**：你可以创建一个`ref`来存储输入元素，并监听`input`或`change`事件来清除其值：

   <input ref="formInput" @input="handleInputChange" type="text">

在`methods`中添加处理函数：

   methods: {
     handleInputChange(e) {
       this.$refs.formInput.value = '';
     }
   }

3. **使用v-model.lazy**：对于复杂场景，可以结合`v-model.lazy`配合`unwatch`来避免在设置初始值时触发验证等副作用：

   <input v-model.lazy="clearFormField" type="text">

清空时：

   data() {
     return {
       clearFormField: '',
     };
   },
   mounted() {
     unwatch(this.clearFormField);
     watch(this.clearFormField, () => {}, { immediate: true });
   },
   beforeDestroy() {
     watch(this.clearFormField, null, { immediate: false });
   }