vue3 reactive 如何重置

要重置Vue 3中的响应式对象，您可以使用Vue 3提供的`reset()`函数。这个函数可以在响应式对象上调用，并将其所有属性重置为初始值。以下是一个示例：

<template>
  <div>
    <h1>{{ state.count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    const increment = () => {
      state.count++;
    };

    const reset = () => {
      Object.assign(state, { count: 0 });
    };

    return {
      state,
      increment,
      reset
    };
  }
};
</script>

在这个例子中，我们定义了一个响应式对象`state`，包括一个计数器`count`。我们还定义了一个`reset()`函数，用于将计数器重置为0。在`reset()`函数中，我们使用了JavaScript的`Object.assign()`函数，将`state`对象重置为一个新对象，其中包括了一个计数器属性`count`，其值为0。这样，当`reset()`函数被调用时，`state`对象的所有属性都会被重置为初始值，即`{ count: 0 }`。