vue3中ref与reactive具体应该怎么使用，reactive有哪些局限性

在 Vue3 中，ref 和 reactive 是 Vue3 Composition API 中两种创建响应式数据的核心工具，它们分别用于不同类型的响应式数据处理：

ref 的使用

ref 主要用于创建响应式的基本类型数据（如字符串、数字、布尔值等）或引用类型数据（如对象或数组）。当你使用 ref 时，数据会被包裹在一个带有 .value 属性的特殊对象中，访问和修改数据需要通过 .value。

csharp 复制代码

import { ref } from 'vue';

// 创建一个响应式的字符串
const count = ref(0); 
console.log(count.value); // 输出初始值 0

count.value++; // 更新值

reactive 的使用

reactive 则用于创建响应式的对象或数组，它会返回一个代理对象，可以直接对其属性进行读写，无需 .value 后缀。

php 复制代码

import { reactive } from 'vue';

// 创建一个响应式的对象
const user = reactive({
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown'
  }
});

// 直接修改对象属性
user.name = 'Jane Doe';
user.address.city = 'Othertown';

reactive 的局限性

深层变更检测 ：reactive 会对传入的对象进行深度响应式代理，这意味着其内部的嵌套对象和数组也是响应式的。然而，如果在没有Vue系统追踪的情况下，直接替换掉 reactive 对象内部某个深层次的引用，会导致新引用的数据无法自动变为响应式。例如：

ini 复制代码

 const user = reactive({ job: { title: 'Developer' } });
 user.job = { title: 'Manager' }; // 新的job对象未经过reactive处理，内部变动不会触发视图更新

要解决这个问题，应当使用 reactive 或 ref 重新设置整个路径：

ini 复制代码

user.job = reactive({ title: 'Manager' }); // 正确做法

非对象/数组类型 ：reactive 不适用于基本数据类型，它只能用于对象和数组。试图将非对象或非数组类型传递给 reactive 函数将导致原始数据不受响应式系统管理。
Proxy限制：Vue3 的响应式系统基于 ES6 的 Proxy，而 Proxy 有一些限制，比如不能代理不可配置的属性（configurable: false）、不能代理 Symbol 类型的属性、不能代理原型链上的属性等。

共同点与差异

共同点 ：两者都能创建响应式数据，且在 Vue 的模板中都可以正常工作，模板会自动解包 ref 的 .value。
差异：
- ref 更适合用于基本类型或单一独立的引用类型变量，它返回的是一个带有 .value 的 ref 对象。
- reactive 用于创建包含多个属性的对象或数组结构，它返回的是一个完整的代理对象，可以直接访问和修改其属性。

在组合式API中，为了在模板或其他地方能够像普通对象一样访问 ref 的值，可以使用 toRefs 函数将 ref 对象转化为普通的响应式对象属性。