vue3 reactive 定义的属性 相互引用嵌套并且实现响应式

在Vue 3中，可以通过reactive函数将一个普通对象转换成响应式对象。当对象的某个属性发生变化时，会自动触发更新。

要实现属性的相互引用和嵌套，并且保持响应式，可以使用ref函数创建一个具有响应式特性的引用对象。然后，将这个引用对象作为属性值赋给其他属性。

以下是一个示例代码，展示了如何定义属性相互引用和嵌套，并且实现响应式：

import { reactive, ref } from 'vue';

const state = reactive({
  count: ref(0),
  nested: {
    name: ref('John'),
    age: ref(25)
  }
});

console.log(state.count.value); // 输出: 0
console.log(state.nested.name.value); // 输出: 'John'
console.log(state.nested.age.value); // 输出: 25

state.count.value += 1; // 修改count属性的值
state.nested.name.value = 'Jane'; // 修改nested对象中的name属性的值
state.nested.age.value += 1; // 修改nested对象中的age属性的值

console.log(state.count.value); // 输出: 1
console.log(state.nested.name.value); // 输出: 'Jane'
console.log(state.nested.age.value); // 输出: 26

在上述示例中，count和nested属性都被定义为ref对象，这样就可以通过访问.value来获取或修改属性的值。当这些属性的值发生变化时，Vue会自动追踪并触发更新。

注意，ref只会将基本类型数据转换成响应式对象，如果想要将一个普通对象转换成响应式对象，需要使用reactive函数。因此，在上述示例中，state是通过reactive函数创建的。