Vue3中重置组件响应式数据回初始状态的最佳方法是什么

针对<script setup>语法下独立声明的ref变量，Vue2时代的Object.assign(this.$data, 初始值)方案确实无法生效，以下是几种可直接落地的实现方式，按适用场景排序：

方案1：零改造成本适配现有单独ref写法 #

不需要调整现有变量的声明和引用方式，只需要抽离初始值生成函数，收集需要重置的ref映射即可实现批量重置：

<script setup>
import { ref } from 'vue'
// 统一维护所有变量的初始值，和Vue2的initialData逻辑完全一致
const getInitialData = () => ({
  var_a: "",
  var_b: [],
  var_c: {},
  var_d: false,
  var_e: 1,
  var_f: "a"
})

// 原有独立声明ref的写法完全不用改
const initVal = getInitialData()
const var_a = ref(initVal.var_a);
const var_b = ref(initVal.var_b);
const var_c = ref(initVal.var_c);
const var_d = ref(initVal.var_d);
const var_e = ref(initVal.var_e);
const var_f = ref(initVal.var_f);

// 收集所有需要重置的ref
const resetTargetMap = { var_a, var_b, var_c, var_d, var_e, var_f }

// 重置方法
const resetData = () => {
  const newInitVal = getInitialData()
  Object.keys(resetTargetMap).forEach(key => {
    resetTargetMap[key].value = newInitVal[key]
  })
}
</script>

• 优势：模板、业务逻辑里对var_a这类变量的引用不需要做任何修改，改造成本几乎为0，适合已经写完大量逻辑的存量组件。

方案2：新组件优先用reactive统一管理状态 #

如果是新开发的组件，可以把需要重置的状态统一收敛到reactive对象中管理，重置逻辑和Vue2的写法几乎一致，代码更简洁：

<script setup>
import { reactive, toRefs } from 'vue'
const getInitialData = () => ({
  var_a: "",
  var_b: [],
  var_c: {},
  var_d: false,
  var_e: 1,
  var_f: "a"
})

// 用reactive统一管理状态
const state = reactive(getInitialData())
// 如果需要拆成单独ref用，直接用toRefs即可，不影响模板使用
const { var_a, var_b, var_c, var_d, var_e, var_f } = toRefs(state)

// 重置逻辑
const resetData = () => {
  Object.assign(state, getInitialData())
}
</script>

• 注意：getInitialData每次调用返回全新的对象/数组引用，不会出现初始值被污染的问题，逻辑比Vue2更可控。

方案3：全量重置直接用key触发组件重挂载 #

如果需要把组件所有状态（包括自定义响应式数据、子组件内部状态、局部DOM交互状态）全部重置回初始状态，不需要写任何重置逻辑，直接通过修改组件key触发组件重新挂载即可：

<!-- 父组件中使用 -->
<template>
  <TargetComponent :key="compKey" />
  <button @click="compKey++">重置组件全部状态</button>
</template>
<script setup>
import { ref } from 'vue'
import TargetComponent from './TargetComponent.vue'
const compKey = ref(0)
</script>

• 优势：零业务代码侵入，不会漏重置任何状态；缺点是会触发组件完整的重渲染、生命周期重执行，适合表单、向导类需要完全回到初始状态的场景，按需选用即可。

内容的提问来源于stack exchange，提问作者Skeletor