在 Vue 3 中，
ref和reactive是两个用于创建响应式数据的核心 API，它们在使用方式、适用场景和底层实现上存在显著差异。
1. 适用数据类型
① ref 可以用于任何类型的值，包括基本类型（如 string、number、boolean）和复杂类型（如对象、数组）。
② reactive 只能用于对象或数组类型，不支持基本类型。
2. 访问与修改方式
① 使用 ref 定义的数据需要通过 .value 属性来访问和修改，例如：
const count = ref(0); count.value++; // 修改值
在模板中，Vue 会自动解包 .value，因此可以直接使用 {{ count }}。
② 使用 reactive 定义的对象可以直接访问其属性，无需 .value，例如：
const state = reactive({ count: 0 });
state.count++; // 直接修改
模板中也可以直接访问属性，如 {{ state.count }}。
3. 重新赋值行为
① ref 支持对整个 .value 进行重新赋值，这会保持响应性。
② reactive 不支持直接替换整个对象，如果替换整个变量，会导致响应性丢失。
4. 底层实现原理
① ref 内部通过 RefImpl 类实现，对于基本类型，它会包装成一个包含 .value 属性的对象；对于对象类型，则会调用 reactive 实现深层响应式处理。
② reactive 则基于 ES6 的 Proxy 实现，对整个对象进行劫持。
5. 使用场景
① 当你需要处理基本类型或不确定数据类型时，推荐使用 ref，因为它更通用。
② 对于复杂对象或结构稳定的配置对象，reactive 更适合，因为它更直观。
③ 如果需要整体替换响应式对象，使用 ref 更加灵活。
番外：ref和reactive哪个更高效？
在 Vue 3 中，ref 和 reactive 的性能差异非常微小，几乎可以忽略不计。
1. 底层实现与性能特点
-
ref：对于基本类型数据（如string、number、boolean），ref会进行轻量级的劫持处理；对于对象类型，它内部会调用reactive来实现深层响应式处理。因此，ref在处理基本类型时更高效。 -
reactive：基于 ES6 的Proxy实现，对整个对象进行劫持。在处理深层嵌套对象时，reactive的性能表现更优，但初始化时的开销略大。
2. 性能对比
- 从基准测试来看，
ref和reactive在渲染和更新方面的性能几乎等效。 - 两者在实际应用中性能差异微乎其微，通常不会成为性能瓶颈。
3. 选择建议
- 如果你主要处理的是基本类型数据，
ref会更轻量。 - 如果你处理的是复杂对象或深层嵌套结构，
reactive的表现更优。 - 在大多数情况下，性能差异不明显，应优先考虑代码的可读性和维护性。
综上，虽然 ref 和 reactive 在性能上非常接近，但它们的适用场景不同。选择哪一个主要取决于你的数据结构和使用方式，而不是性能考虑。
● —— 总 结 —— ●
| 特性 | ref |
reactive |
|---|---|---|
| 适用类型 | 所有类型（基本类型、对象、数组） | 仅对象和数组 |
| 访问方式 | 需要 .value（JS中） |
直接访问属性（JS中） |
| 模板中使用 | 自动解包，无需 .value |
直接访问属性 |
| 重新赋值 | 支持 | 不支持 |
| 底层实现 | 使用 RefImpl 包装 |
使用 Proxy 劫持对象 |
通过合理选择 ref 或 reactive，可以更好地管理 Vue 应用中的响应式数据。
▶ 综上，来个小结 ▼
ref 和 reactive 是 Vue 3 中实现响应式数据的核心 API，主要区别在于数据类型支持、访问方式、底层实现及适用场景：ref 支持基本类型和对象，需通过 .value 访问；reactive 仅支持对象，可直接操作属性。
核心区别对比
1、数据类型支持。
- ref：兼容所有数据类型（基本类型如
number/string/boolean和对象/数组）。 - reactive：仅支持对象或数组（如
{ count: 0 }或 ``），传入基本类型（如reactive(0)）会直接返回原值且无响应性。
2、访问与修改方式。
- ref：必须通过
.value访问或修改值（例如count.value = 1），但在模板中自动解包，无需.value。 - reactive：直接操作属性（例如
user.name = "Alice"），无需.value。
3、底层实现。
- ref：对基本类型包装为带
.value的代理对象；对对象类型内部调用reactive实现深层响应。 - reactive：基于 ES6 Proxy 直接代理整个对象，递归处理嵌套属性。
4、解构问题。
- 两者解构（如
const { name } = user）均会丢失响应性，需用toRefs处理（例如const { name } = toRefs(user)）。
5、适用场景。
- ref：基本类型数据（如计数器
const count = ref(0)）或不确定数据类型的场景。 - reactive：复杂对象或数组（如表单数据
const form = reactive({ username: "" })）。