vue3中如何修改reactive定义的数据

在 Vue 3 中，如果你想要改变通过 `ref` 或者 `reactive` 定义的数据，通常不需要显式地去修改数据本身，因为 Vue 的响应式系统会自动跟踪数据的变化。但是，有以下几种情况：

1. **直接修改基础数据**：
如果数据是 JavaScript 基础类型的值（如数组、对象），直接更改它们就会触发视图更新。

   const myObject = reactive({ name: 'John' });
   myObject.name = 'Jane'; // 直接修改会生效

2. **数组增删改**：
对于数组，Vue 提供了一些特殊的方法来进行安全的操作，如 `push`, `pop`, `splice` 等，这些操作会在内部处理变更通知。

   const myArray = ref([]);
   myArray.push('item'); // 会触发视图更新

3. **对象属性的深度修改**：
如果你想在对象上添加新的键或删除键，可以使用 `vue.set` 或 `delete` 函数来保持响应性。

   import { set } from 'vue';
   set(myObject, 'newKey', 'value'); // 添加新键
   delete myObject.oldKey; // 删除键

4. **对于计算属性**：
计算属性基于其依赖的响应式数据计算，当你依赖的数据变化时，计算结果也会跟着更新。

5. **手动解绑响应**：
使用 `unref()` 可以将响应式的引用转换为普通值，这时你需要自己管理更新。

const unRefValue = ref(0);
// 如果你不再需要响应式，可以这样取消：
const normalValue = unref(unRefValue); // 此时修改 normalValue 不再影响原始值