如何在vue3中将所有值重置为初始状态

Question

在vue2中，我们可以使用Object.assign(this.$data, this.$options.data())重置所有值

但是我们如何在 vue3 中做同样的事情（一行编码），假设我的 setup() 是......

setup(props, context) {
  let a = ref('value1')
  let b = ref('value2')
  let c = ref('value3')
  
  function reset() {
    Object.assign(????, ????) or ???? <-- ????
  }
}

Answer 1

Object.assign(this.$data, this.$options.data())是一种依赖于选项 API 内部结构的解决方法。

对于需要多次访问初始状态的场景，拥有可重用的函数是一个很好的做法：

const getInitialData = () => ({ a: 1, ... });

data它可以在和 中调用setup。

组件状态或其一部分可以表示为单个对象。在这种情况下，它的处理方式与 Vue 2 状态相同：

const formData = reactive(getInitialData());
...
Object.assign(formData, getInitialData());

否则a.value， 等 需要手动或使用辅助函数分配各自的初始值：

let data = getInitialData();
for (let [key, ref] of Object.entries({ a, b, ... }))  
  ref.value = data[key];