Nuxt3组件经v-if卸载重渲染后输入框旧值残留异常问题

这不是内存泄漏，是Nuxt3（底层为Vue3）和Nuxt2（底层为Vue2）的组件渲染、状态回收逻辑差异导致的预期外行为：

• Nuxt2/Vue2 环境下，v-if 切换为false触发组件卸载时，会完整销毁组件实例、清除所有响应式依赖、回收对应DOM节点，下次渲染会生成全新实例，不会残留旧数据
• Nuxt3/Vue3 环境下有三个默认逻辑会导致旧数据残留：
  • <NuxtPage>、<ClientOnly>等Nuxt内置组件默认开启keep-alive缓存，v-if隐藏时不会执行完整的组件卸载流程，实例状态会被保留
  • Vue3的虚拟DOM对比策略会默认复用同层级、同类型的原生表单元素，哪怕组件是新创建的实例，只要输入框DOM位置和类型没变，就会直接复用旧DOM节点，残留之前的输入值
  • 如果表单绑定的状态存放在useState、Pinia、全局单例composable中，组件卸载时没有手动重置，新实例挂载后会直接读取到旧的状态值

按优先级依次排查处理即可：

• 给组件加唯一key阻断复用
  给v-if控制的表单组件绑定动态key，每次打开表单时更新key值，强制Vue生成全新的组件实例和DOM节点，这是最通用、改造成本最低的方案：

  <template>
    <SubmitForm v-if="formVisible" :key="formInstanceId" />
    <button @click="openForm">新建提交</button>
  </template>
  
  <script setup>
  const formVisible = ref(false)
  const formInstanceId = ref(0)
  const openForm = () => {
    formInstanceId.value += 1
    formVisible.value = true
  }
  </script>
  

• 关闭内置组件的默认缓存
  如果表单组件是路由页面、或者包裹在<ClientOnly>中，显式关闭keep-alive配置，避免组件被缓存：

  <!-- 路由页面关闭缓存 -->
  <NuxtPage :keepalive="false" />
  <!-- 客户端渲染组件关闭缓存 -->
  <ClientOnly :keepalive="false">
    <SubmitForm />
  </ClientOnly>
  

• 卸载时主动重置表单状态
  在表单组件内部的onUnmounted生命周期中，主动清空本地响应式表单数据，原生表单可以直接调用DOM的reset方法清除输入值：

  <script setup>
  const formRef = ref()
  const formData = reactive({
    title: '',
    description: ''
  })
  
  onUnmounted(() => {
    // 重置响应式状态
    Object.keys(formData).forEach(key => Reflect.set(formData, key, ''))
    // 重置原生表单值
    formRef.value?.reset()
  })
  </script>
  

• 排查全局状态污染
  不要把单表单的局部状态定义在全局作用域的composable、Pinia store中，组件私有状态直接定义在组件的setup作用域内即可，避免单例状态被多个组件实例共享。

注意：不要默认依赖v-if的卸载逻辑自动清理状态，Vue3的DOM复用策略和Vue2存在明确差异，主动重置状态+动态key的写法可以兼容所有Nuxt3/Vue3版本，不会出现数据残留问题。

内容的提问来源于stack exchange，提问作者I. Albuquerque