在 Vue 3 的组合式 API 中，ref 和 reactive 是两种核心的响应式数据处理方式，用于创建响应式对象。它们都使得数据变得响应式，当数据发生变化时，视图会自动更新。
1. ref
ref 用于创建一个响应式的基本数据类型（如字符串、数字、布尔值、null 等）或对象的引用。它会返回一个包含 .value 的对象。对 .value 进行修改时，视图会自动更新。
使用 ref：
- 用于创建一个简单的响应式数据。
ref可以用于基本数据类型，也可以用于对象类型，但它的使用方式略有不同（需要通过.value来访问和修改）。
示例：
<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { ref } from 'vue'// 创建一个响应式变量 count
const count = ref(0)// 定义一个方法来更新 count
const increment = () => {count.value++
}
</script>
解释：
count是通过ref(0)创建的一个响应式数据。count.value是获取和修改这个响应式数据的方式。- 在模板中直接使用
count，Vue 会自动处理count.value。
2. reactive
reactive 用于创建一个响应式的对象或数组。与 ref 不同的是，reactive 创建的是一个深度响应式的对象，能够追踪对象的所有嵌套属性。你不需要访问 .value，可以直接使用对象的属性。
使用 reactive：
- 用于创建响应式对象。
- 对象的嵌套属性也会变成响应式。
示例：
<template><div><p>{{ user.name }}</p><button @click="changeName">Change Name</button></div>
</template><script setup>
import { reactive } from 'vue'// 创建一个响应式对象
const user = reactive({name: 'John',age: 30
})// 修改对象的属性
const changeName = () => {user.name = 'Alice'
}
</script>
解释：
user是通过reactive创建的响应式对象。- 可以直接访问和修改
user.name、user.age，不需要.value。
区别：ref 与 reactive
| 特性 | ref | reactive |
|---|---|---|
| 数据类型 | 用于基本数据类型（数字、字符串、布尔值等）和对象 | 用于对象、数组等复杂类型 |
| 修改方式 | 通过 .value 访问和修改数据 | 直接访问和修改对象的属性 |
| 响应性范围 | 只能响应单一的值（基本类型、对象/数组的引用） | 创建深度响应式对象，自动响应对象内嵌的属性 |
| 适用场景 | 基本数据类型、DOM 引用、对象引用（简易情况） | 对象和数组的深度响应式处理 |
选择使用 ref 或 reactive
- 如果你只是处理一个简单的数据（如数字、字符串等），使用
ref。 - 如果你需要创建一个响应式对象或者数组，并且要跟踪其所有的嵌套属性，使用
reactive。
注意：
reactive创建的对象是深度响应式的，意味着对象中的嵌套属性会自动成为响应式。ref对于对象也是响应式的，但需要通过.value来访问和修改。- 如果你有一个对象并且希望直接使用其属性而不通过
.value，可以考虑使用reactive。
示例：结合使用 ref 和 reactive
你也可以在同一个组件中同时使用 ref 和 reactive，例如：
<template><div><p>{{ user.name }} - {{ count }}</p><button @click="increment">Increment</button><button @click="changeName">Change Name</button></div>
</template><script setup>
import { ref, reactive } from 'vue'// 创建一个响应式对象
const user = reactive({ name: 'John', age: 30 })// 创建一个响应式数字
const count = ref(0)// 定义方法修改数据
const increment = () => {count.value++
}const changeName = () => {user.name = 'Alice'
}
</script>
在这个示例中，user 是一个响应式对象，而 count 是通过 ref 创建的响应式数字。两者可以并行使用，且视图会随着数据变化自动更新。
总结：
ref适用于创建简单类型（如基本数据类型或单个对象的引用）的响应式数据。reactive适用于创建对象或数组的深度响应式数据。- 选择哪个取决于你的需求，简单数据用
ref，复杂数据（对象、数组等）用reactive。
