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

news2025/1/14 3:18:21

在 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 创建的响应式数字。两者可以并行使用，且视图会随着数据变化自动更新。