Vue3中如何用一行代码将所有响应式值重置为初始状态

现有代码结构下的一行实现 #

针对你已经单独声明a、b、c三个ref的代码结构，直接用数组解构一次性赋值初始值即可：

function reset() {
  [a.value, b.value, c.value] = ['value1', 'value2', 'value3']
}

更易维护的等价实现（和Vue2逻辑对齐） #

如果不想重复编写初始值，更推荐提前抽离初始状态生成函数，和Vue2的$options.data()逻辑完全一致，写法如下：

setup(props, context) {
  // 抽离初始状态生成函数，对应Vue2的data函数
  const getInitialData = () => ({
    a: 'value1',
    b: 'value2',
    c: 'value3'
  })
  // 统一用reactive托管所有状态
  const state = reactive(getInitialData())

  function reset() {
    // 一行完成重置，和Vue2的Object.assign写法逻辑完全等价
    Object.assign(state, getInitialData())
  }
  
  // 需要解构返回给模板使用的话配合toRefs即可
  return {
    ...toRefs(state),
    reset
  }
}

如果变量数量较多，更推荐第二种写法，后续新增状态只需要修改getInitialData即可，不需要同步修改reset方法，维护成本更低。

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