vue3 如何修改proxy的响应式数据

在 Vue3 中，Vue.js 通过 Proxy 对象实现了数据的响应式原理。如果你想修改 proxy 的响应式数据，通常是在组件内部操作数据的时候。如果你使用的是 `setup` 函数，你可以直接改变数据，因为 Vue 会在这些数据变化时自动跟踪。

例如，假设你有一个名为 `store` 的响应式对象：

const store = reactive({ name: 'John', age: 30 });

如果你想修改其中的属性，可以这样做：

store.name = 'Jane'; // 直接赋值会触发响应式更新
store.age++; // 自增操作同样会更新

如果你想在某个条件改变后再更新响应式数据，可以在 `setup` 函数中处理：

setup() {
  const isAdult = computed(() => store.age >= 18);

  function updateAge(newAge) {
    if (isAdult.value) {
      store.age = newAge;
    }
  }

  return { isAdult, updateAge };
}

在这个例子中，只有当年龄大于等于18岁时，才会更新年龄。