VUE3 组合式 API 中，ref 和 reactive 是两种核心的响应式数据处理方式

在 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。