vue3 reactive 深层响应

在Vue3中，使用reactive函数创建的对象是默认深层响应式的。这意味着，当你更改深层次的对象或数组时，这些更改也会被检测到。在上面的代码示例中，我们可以看到使用reactive函数创建了两个对象state和obj，其中obj包含了一个嵌套的对象nested和一个数组arr。在mutateDeeply函数中，我们对obj的嵌套对象和数组进行了更改，这些更改也会被检测到。在模板中，我们可以看到当点击第二个按钮时，obj对象的内容会被展示出来。

总之，Vue3中的reactive函数可以让我们创建深层响应式的对象，使得我们可以方便地对嵌套的对象和数组进行更改，并且这些更改也会被自动检测到。

相关问题

vue3 reactive 解构 ref

Vue3 中的 `reactive` 和 `ref` 是响应式系统的核心组件，它们用于创建数据绑定和监听变化的功能。

`reactive` 函数主要用于将普通的 JavaScript 对象转换成响应式的实例。当你对这个对象的属性进行修改时，视图会自动更新。它内部会对对象进行了劫持，并自动追踪其深层的变化。例如：

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

现在，如果你改变 `reactiveObj.name` 或 `reactiveObj.age`，Vue 会感知到并更新 UI。

而 `ref` 则是用来存储单值（可以是基本类型或复杂对象）并保持其响应性的工具。它的核心是一个包装对象，包含实际的数据值和一个观察者。你可以像操作普通变量一样操作 `ref`，但它的值会在模板中实时反映出来。例如：

const nameRef = ref('John');
nameRef.value = 'Jane'; // 更新名字，UI也会同步更改

vue3中怎么给reactive赋值

在Vue 3中，如果你想要将数据变为响应式并允许它自动更新视图，你可以使用`ref`或`reactive`函数。`ref`用于创建响应式的引用类型，而`reactive`则用于更复杂的数据结构。

1. 对于简单的变量，可以使用`ref`：

import { ref } from 'vue';

const myValue = ref(0);
// 赋值
myValue.value = 10; // 现在 myValue 已经是响应式的了

2. 对于复杂的对象，可以使用`reactive`：

import { reactive } from 'vue';

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

// 赋值
myObject.age = 35; // 改变后的年龄会立即反映到视图上

注意，当你对`reactive`返回的对象进行深拷贝或者修改其深层属性时，也会触发视图更新。然而，对于不可变的复杂结构，你需要手动通知变化，例如使用`$set`：

myObject = { ...myObject, address: 'New City' }; // 这不会触发更新，需用 $set
this.$set(myObject, 'address', 'New City');