Naive UI的Modal关闭后数据未重置，如何解决？

这个问题其实挺常见的，我之前也踩过这个坑。主要原因是Modal关闭时没有触发表单重置的逻辑。我来分步骤解释下解决方案：

首先，单纯把visible设为false并不会自动触发resetForm方法，我们需要监听Modal的关闭事件。Naive UI的Modal提供了on-after-leave这个回调，非常适合在这里做清理工作。

修改后的代码应该是这样的：

<template>

  <n-modal 

    v-model:show="visible"

    @after-leave="resetForm"  // 关键点：添加这个事件监听

  >

    <n-form ref="formRef" :model="formData">

      <n-input v-model:value="formData.name" />

    </n-form>

  </n-modal>

  <button @click="visible = false">取消</button>

</template>



<script setup>

import { ref } from 'vue'

const visible = ref(false)

const formData = ref({ name: '' })



const resetForm = () => {

  // 这里要注意，直接赋空对象可能导致响应式丢失

  formData.value = { name: '' }

}

</script>

为什么这样做能解决问题：
1. @after-leave 是Modal完全关闭后触发的事件，比直接用visible变化更可靠
2. 重置表单时不要直接赋空对象{}，这样会导致响应式失效。应该明确重置所有字段

另外还有个常见错误点要注意：如果在组件外部控制Modal，记得也要手动调用resetForm。比如这样：

const handleClose = () => {

  visible.value = false

  resetForm()  // 双重保险

}

我一般推荐两种方式都用上，这样更健壮。有时候UI库的动画过渡可能导致事件监听不够及时，双重调用能确保万无一失。

最后补充一点，如果你用的是Naive UI的表单验证，可能还需要额外重置验证状态：

const formRef = ref(null)



const resetForm = () => {

  formData.value = { name: '' }

  formRef.value?.restoreValidation()  // 清除验证状态

}

你这个问题其实挺常见的，我之前也踩过这个坑。问题出在数据初始化的方式上。

首先你要知道，当使用ref创建响应式对象时，直接赋值一个新的空对象，Vue是能追踪到变化的。但这里有个细节需要注意：当组件还在挂载过程中时，你调用了resetForm方法将其赋值为空对象，这时候表单组件内部可能已经读取过初始值了。

给你推荐一个更稳妥的做法：

把resetForm改成这样：
function resetForm() {
formData.value = {
name: ''
}
}

然后在关闭modal的时候调用它：
取消

或者更推荐在打开的时候初始化：
function openModal() {
visible = true
resetForm()
}

这样不管你是点击遮罩层关闭还是点击按钮关闭，都能保证每次打开都是干净的数据。

如果你希望更彻底一点，可以考虑用watch来监听visible状态，在关闭的时候自动清空：
watch(() => visible, (newVal) => {
if (!newVal) {
resetForm()
}
})

不过要特别注意一点：如果你的表单里有其他字段，比如number类型的输入框，建议把初始值都补上：
formData.value = {
name: '',
age: null
}

因为如果初始值不明确，可能会导致某些类型检查的问题。我之前就因为少写了一个字段，导致输入框显示undefined，调试了半天。

最后再给你一个完整的代码示例：

const visible = ref(false)

const formData = ref({ name: '' })



function resetForm() {

  formData.value = {

    name: ''

  }

}



function openModal() {

  visible.value = true

  resetForm()

}

然后在模板里：

<n-modal v-model:show="visible">

  <n-form ref="formRef" :model="formData">

    <n-input v-model:value="formData.name" />

  </n-form>

</n-modal>

<button @click="openModal">打开</button>

这样处理之后，每次打开modal都会初始化数据，关闭的时候清空数据，就不会出现数据残留的问题了。