vue3中ref，reactive，toRefs与toRef创建响应式数据

最新推荐文章于 2025-09-29 21:47:33 发布

原创最新推荐文章于 2025-09-29 21:47:33 发布 · 1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

一、使用 `ref` 创建基本类型的响应式数据

ref 是 Vue 3 中的响应式 API，用于包装基本类型（如字符串、数字、布尔值等）为响应式对象。

ref 返回一个响应式对象，其值存储在 .value 属性中。

1、示例

2、修改响应式数据

直接通过 .value 修改即可触发响应式更新：

二、使用 `ref` 创建对象类型的响应式数据

在TypeScript中，可以使用ref创建对象类型的响应数据。以下是一个基本示例：

三、使用reactive创建对象类型的响应式数据

在TypeScript中，可以使用ref创建对象类型的响应数据。以下是一个基本示例：

四、ref与reactive对比

1、ref 与 reactive 的基本概念

ref 和 reactive 是 Vue 3 组合式 API 中用于创建响应式数据的核心函数。两者均用于跟踪数据变化并触发视图更新，但在使用场景和实现细节上存在差异。

2、ref 的特点与使用

ref 用于将基本类型（如字符串、数字）或对象转换为响应式引用。它返回一个包含 value 属性的响应式对象，访问或修改数据需通过 .value。

适用场景：
- 基本类型数据（如 string、number、boolean）。
- 需要显式使用 .value 的场景（如模板外逻辑）。
优势：
- 明确的数据访问方式，避免隐式解包导致的混淆。
- 更适合在逻辑代码中单独管理响应式数据。

3、reactive 的特点与使用

reactive 用于将对象或数组转换为深层响应式对象，直接访问或修改属性即可触发响应。

适用场景：
- 复杂对象或数组。
- 需要嵌套响应式数据的场景（如表单对象）。
优势：
- 无需 .value 操作，代码更简洁。
- 自动深度响应，嵌套属性变化也能触发更新。

4、关键区别对比

数据类型：
- ref 适用于基本类型或对象，reactive 仅适用于对象或数组。
访问方式：
- ref 需通过 .value 访问，reactive 直接访问属性。
解包行为：
- 在模板中，ref 自动解包（无需 .value），reactive 保持原样。

5、何时选择

使用 ref：
- 管理独立的基本类型值。
- 需要明确区分响应式引用与原始值。
使用 reactive：
- 处理复杂状态对象（如表单、配置项）。
- 需要深层嵌套响应式数据时。

6、注意事项

类型标注：
在 TypeScript 中，ref 可通过泛型明确类型，reactive 会自动推断。
解构问题：
reactive 解构会丢失响应性，需使用 toRefs 转换。

const state = reactive({ count: 0 });
const { count } = toRefs(state); // 保持响应性

通过理解两者的差异，可以更高效地选择适合场景的响应式 API。

五、toRef与toRefs

1、toRef 与 toRefs 的区别

toRef 和 toRefs 是 Vue 3 Composition API 中用于响应式数据处理的工具函数，主要用于处理 reactive 对象的属性转换为 ref 对象。

（1）toRef

toRef 用于将 reactive 对象的某个属性转换为一个独立的 ref 对象，同时保持与源属性的响应式连接。修改 ref 的值会同步到源 reactive 对象，反之亦然。

语法：

const ref = toRef(reactiveObject, 'propertyName')

示例：

import { reactive, toRef } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})

const countRef = toRef(state, 'count')

// 修改 ref 会影响源对象
countRef.value++
console.log(state.count) // 输出 1

// 修改源对象也会影响 ref
state.count = 10
console.log(countRef.value) // 输出 10

（2）toRefs

toRefs 用于将整个 reactive 对象的每个属性转换为独立的 ref 对象，返回一个普通对象，其属性均为 ref。适用于解构 reactive 对象时保持响应性。

语法：

const refs = toRefs(reactiveObject)

示例：

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})

const { count, name } = toRefs(state)

// 修改 ref 会影响源对象
count.value++
console.log(state.count) // 输出 1

// 修改源对象也会影响 ref
state.name = 'Vue 3'
console.log(name.value) // 输出 'Vue 3'