Vue toRefs() 解构响应式对象的保留响应性详解
【摘要】 一、引言在 Vue 3 的组合式 API（Composition API）中，reactive()函数常用于将一个普通对象转换为响应式对象，使得对象的属性变化能够自动触发视图的更新。然而，当我们需要将这个响应式对象的多个属性解构出来，传递给子组件、在模板中直接使用，或者在函数参数中解构时，直接使用 ES6 的解构赋值（如 const { name, age } = reactiveObj）会...
一、引言
reactive()函数常用于将一个普通对象转换为响应式对象，使得对象的属性变化能够自动触发视图的更新。然而，当我们需要将这个响应式对象的多个属性解构出来，传递给子组件、在模板中直接使用，或者在函数参数中解构时，直接使用 ES6 的解构赋值（如 const { name, age } = reactiveObj）会导致 响应性丢失 —— 解构后的变量变成普通变量，不再与原始响应式对象关联，修改它们不会触发视图更新。toRefs()函数，它能够将一个响应式对象（通常是 reactive()创建的对象）的每个属性转换为一个 对应的 ref()响应式引用，从而在解构后依然保持每个属性的响应性。本文将深入探讨 toRefs()的使用场景、技术原理、代码实现及其在实际项目中的应用，帮助开发者掌握这一关键技巧，确保在解构响应式对象时响应性得以保留。二、技术背景
1. 响应式系统基础
reactive()函数将一个普通对象包装成一个响应式代理对象。当访问或修改这个代理对象的属性时，Vue 会自动追踪依赖并触发相应的更新。然而，ES6 的解构赋值操作会直接提取对象的属性值，将其转换为普通的 JavaScript 变量，从而破坏了与原始响应式代理的关联，导致响应性丢失。2. toRefs() 的作用
toRefs()函数的主要作用是将一个响应式对象（如通过 reactive()创建的对象）的每个属性转换为一个 ref()响应式引用。这些 ref引用保留了与原始响应式对象属性的连接，因此即使通过解构赋值将它们提取出来，修改这些 ref的值依然会同步更新原始响应式对象的属性，并触发视图的重新渲染。-
保留响应性：解构后的每个属性都是一个 ref，修改它们会同步更新原始对象，保持响应性。 -
灵活性：可以在模板、函数参数、子组件 props 等多种场景下安全地解构响应式对象，而无需担心响应性丢失。 -
与组合式 API 无缝集成： toRefs()与ref()和reactive()一起，构成了 Vue 3 组合式 API 中管理响应式数据的核心工具集。
三、应用使用场景
1. 模板中解构响应式对象
reactive()创建的对象可以在模板中直接访问其属性，但如果我们希望将这些属性解构后使用（例如，通过计算属性或方法传递部分属性），直接解构会导致响应性丢失。使用 toRefs()可以安全地解构并保持响应性。2. 函数参数中解构响应式对象
toRefs()可以将这些属性转换为 ref，从而在函数内部修改它们时，原始对象也会同步更新。3. 子组件中接收和解构响应式对象
toRefs()可以确保子组件中解构后的属性依然保持响应性。4. 组合式函数中返回解构的响应式属性
toRefs()，可以将这些属性转换为 ref，使得调用者可以安全地解构并保持响应性。四、不同场景下详细代码实现
场景 1：模板中解构响应式对象并保持响应性
reactive()创建一个包含用户信息（如姓名、年龄）的响应式对象。在模板中，通过 toRefs()解构这些属性，并展示在页面上。用户可以通过输入框修改姓名和年龄，视图应实时更新。1.1 代码实现
<!-- UserProfile.vue -->
<template>
<div>
<h2>用户信息</h2>
<!-- 解构响应式对象的属性，保持响应性 -->
<div>
<label>姓名:</label>
<input v-model="name" placeholder="请输入姓名" />
</div>
<div>
<label>年龄:</label>
<input v-model.number="age" type="number" placeholder="请输入年龄" />
</div>
<p>当前用户信息 - 姓名: {{ name }}, 年龄: {{ age }}</p>
</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue';
// 创建响应式对象
const user = reactive({
name: '张三',
age: 25
});
// 使用 toRefs() 将响应式对象的属性转换为 ref
const { name, age } = toRefs(user);
</script>
<style scoped>
/* 简单样式，可根据需要调整 */
div {
margin-bottom: 15px;
}
label {
display: inline-block;
width: 80px;
font-weight: bold;
}
input {
width: 200px;
padding: 5px;
margin-left: 10px;
}
p {
font-size: 18px;
color: #333;
}
</style>1.2 运行结果
-
页面加载时，显示用户初始信息：姓名“张三”，年龄“25”。 -
用户可以在输入框中修改姓名和年龄，视图实时更新显示最新的用户信息。 -
由于使用了 toRefs()，解构后的name和age依然是响应式的，修改它们会同步更新原始user对象，从而触发视图更新。
场景 2：函数参数中解构响应式对象并保持响应性
toRefs()确保函数内部对属性的修改会同步到原始响应式对象。2.1 代码实现
<!-- UpdateUser.vue -->
<template>
<div>
<h2>更新用户信息</h2>
<div>
<label>姓名:</label>
<input v-model="name" placeholder="请输入姓名" />
</div>
<div>
<label>年龄:</label>
<input v-model.number="age" type="number" placeholder="请输入年龄" />
</div>
<button @click="updateUserInfo">更新信息</button>
<p>当前用户信息 - 姓名: {{ name }}, 年龄: {{ age }}</p>
</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue';
// 创建响应式对象
const user = reactive({
name: '李四',
age: 30
});
// 使用 toRefs() 将响应式对象的属性转换为 ref
const { name, age } = toRefs(user);
// 定义一个函数，接收解构后的 ref 属性
const updateUserInfo = () => {
// 在函数内部，name 和 age 依然是 ref，可以通过 .value 访问和修改
name.value = '王五'; // 修改姓名
age.value = 35; // 修改年龄
};
</script>
<style scoped>
/* 简单样式，可根据需要调整 */
div {
margin-bottom: 15px;
}
label {
display: inline-block;
width: 80px;
font-weight: bold;
}
input {
width: 200px;
padding: 5px;
margin-left: 10px;
}
button {
margin-top: 10px;
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
p {
font-size: 18px;
color: #333;
}
</style>2.2 运行结果
-
页面加载时，显示用户初始信息：姓名“李四”，年龄“30”。 -
用户可以在输入框中修改姓名和年龄，但点击“更新信息”按钮后，姓名变为“王五”，年龄变为“35”，视图实时更新。 -
由于在函数内部通过 toRefs()解构的name和age是ref，通过.value修改它们的值会同步更新原始user对象，从而触发视图更新。
场景 3：子组件中接收和解构响应式对象
toRefs()解构这些属性，并在模板中展示和修改它们。确保子组件中对属性的修改会同步到父组件的响应式对象。3.1 父组件代码（ParentComponent.vue）
<!-- ParentComponent.vue -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent :userProps="user" />
<p>父组件中的用户信息 - 姓名: {{ user.name }}, 年龄: {{ user.age }}</p>
</div>
</template>
<script setup>
import { reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';
// 创建响应式对象
const user = reactive({
name: '赵六',
age: 40
});
</script>
<style scoped>
/* 简单样式，可根据需要调整 */
div {
margin-bottom: 15px;
}
p {
font-size: 18px;
color: #333;
}
</style>3.2 子组件代码（ChildComponent.vue）
<!-- ChildComponent.vue -->
<template>
<div>
<h3>子组件</h3>
<div>
<label>姓名:</label>
<input v-model="name" placeholder="请输入姓名" />
</div>
<div>
<label>年龄:</label>
<input v-model.number="age" type="number" placeholder="请输入年龄" />
</div>
<p>子组件中的用户信息 - 姓名: {{ name }}, 年龄: {{ age }}</p>
</div>
</template>
<script setup>
import { toRefs } from 'vue';
// 定义 props
const props = defineProps({
userProps: {
type: Object,
required: true
}
});
// 使用 toRefs() 将 props 中的响应式对象属性转换为 ref
const { userProps } = props; // 注意：这里需要进一步解构 userProps
// 正确的方式是直接在 props 中解构 userProps，但为了使用 toRefs，我们需要传递整个对象并在子组件内部解构
// 为了简化，假设 props 传递的是整个 user 对象
// 更推荐的方式是将需要解构的属性通过单独的 props 传递，或者使用 v-bind 传递整个对象并在子组件内部使用 toRefs
// 修正：将 userProps 作为响应式对象传递，并在子组件内部使用 toRefs
const { name, age } = toRefs(props.userProps);
</script>
<style scoped>
/* 简单样式，可根据需要调整 */
div {
margin-bottom: 15px;
}
label {
display: inline-block;
width: 80px;
font-weight: bold;
}
input {
width: 200px;
padding: 5px;
margin-left: 10px;
}
p {
font-size: 18px;
color: #333;
}
</style>props.userProps接收父组件传递的响应式对象，并使用 toRefs()将其属性转换为 ref。这种方式确保了子组件中对 name和 age的修改会同步到父组件的 user对象。3.3 运行结果
-
父组件显示初始用户信息：姓名“赵六”，年龄“40”。 -
子组件中可以通过输入框修改姓名和年龄，视图实时更新，同时父组件中的用户信息也同步更新。 -
由于子组件使用了 toRefs()，解构后的name和age依然是响应式的，修改它们会同步更新父组件的响应式对象，从而触发父组件视图的更新。
五、原理解释
1. 响应式对象与解构赋值的问题
reactive()创建的响应式对象通过 Proxy 实现，当访问或修改其属性时，Vue 能够自动追踪依赖并触发视图更新。然而，当我们使用 ES6 的解构赋值（如 const { name, age } = reactiveObj）时，解构出来的 name和 age是普通的 JavaScript 变量，不再与原始的响应式对象关联。因此，修改这些变量不会触发视图更新，导致响应性丢失。2. toRefs() 的工作原理
toRefs()函数接收一个响应式对象（通常是 reactive()创建的对象），并返回一个新的对象，该对象的每个属性都是一个 ref()响应式引用，这些 ref引用指向原始响应式对象的对应属性。通过这种方式，即使解构了这些 ref，它们依然保持着与原始响应式对象的连接，修改 ref的值（通过 .value）会同步更新原始对象，从而触发视图更新。-
创建响应式对象：使用 reactive()将一个普通对象转换为响应式代理对象。 -
应用 toRefs()：将响应式对象的每个属性转换为一个 ref，这些ref保持对原始属性的引用。 -
解构 ref 属性：在模板、函数或组件中，可以安全地解构这些 ref，修改它们的值（通过.value）会同步更新原始响应式对象。 -
响应式更新：当 ref的值变化时，Vue 的响应式系统检测到变化，通知相关的依赖（如模板、计算属性、侦听器）进行更新，从而实现视图的实时同步。
3. 与 ref() 和 reactive() 的关系
-
ref()：用于创建单个响应式变量，通过 .value访问和修改值。 -
reactive()：用于创建一个响应式对象，直接通过属性访问和修改，无需 .value。 -
toRefs()：将 reactive()创建的对象的每个属性转换为ref，使得在解构后依然保持响应性，同时允许通过.value访问和修改属性值。
reactive()用于管理一组关联的响应式数据，而 toRefs()用于在这些数据需要被解构或传递到其他地方时，保持其响应性。ref()则用于管理独立的响应式变量。六、核心特性
|
|
|
|---|---|
|
|
ref，解构后的属性依然保持响应性，修改它们会同步更新原始对象。 |
|
|
|
|
|
ref()和 reactive()无缝集成，构成 Vue 3 组合式 API 中管理响应式数据的核心工具集。 |
|
|
|
|
|
ref的繁琐操作，通过 toRefs()一次性处理整个对象。 |
七、原理流程图及原理解释
原理流程图（toRefs() 的响应式过程）
+-----------------------+ +-----------------------+ +-----------------------+
| 创建响应式对象 | | 应用 toRefs() | | 解构 ref 属性 |
| (reactive(obj)) | | (转换为 ref 引用) | | (安全解构，保持响应性) |
+-----------------------+ +-----------------------+ +-----------------------+
| | |
| 1. 创建一个响应式代理对象 | |
| (通过 Proxy 拦截属性访问) | |
|--------------------------->| 2. 将每个属性转换为 ref |
| | (每个 ref 指向原始属性) |
| |--------------------------->| 3. 在模板/函数中解构 |
| | | (使用解构后的 ref) |
| | | (修改 ref.value 同步更新原始对象) |
| | |--------------------------->| 4. 响应式系统更新视图 |
| | | (Vue 检测变化，触发更新) |原理解释
-
创建响应式对象：通过 reactive()函数，将一个普通的 JavaScript 对象转换为一个响应式代理对象。这个代理对象通过 Proxy 拦截对属性的访问和修改，使得 Vue 能够自动追踪依赖并触发视图更新。 -
应用 toRefs()： toRefs()函数接收这个响应式代理对象，并遍历其所有属性，将每个属性转换为一个ref()响应式引用。这些ref引用指向原始响应式对象的对应属性，通过.value访问和修改属性值。 -
解构 ref 属性：在组件的模板、函数参数或子组件中，可以安全地对这些 ref进行解构赋值。由于每个解构出来的属性都是一个ref，它们依然保持着与原始响应式对象的连接。修改这些ref的值（通过.value）会同步更新原始响应式对象的属性，从而触发 Vue 的响应式系统，更新相关的视图或其他依赖。 -
响应式更新：当通过解构后的 ref修改属性值时，Vue 的响应式系统检测到变化，通知所有依赖该属性的组件或逻辑部分进行更新，实现视图的实时同步和数据的一致性。
八、环境准备
1. 开发环境
-
Node.js：版本 ≥ 16（推荐 18+）。 -
包管理工具：npm 或 yarn。 -
Vue 3 项目：通过 Vue CLI 或 Vite 创建（示例基于 Vite）。
2. 创建项目
# 使用 Vite 创建 Vue 3 项目
npm create vite@latest my-toRefs-demo --template vue
cd my-toRefs-demo
npm install
# 如果需要使用 lodash-es 进行防抖等操作（可选）
npm install lodash-es3. 项目结构
my-toRefs-demo/
├── src/
│ ├── components/
│ │ ├── UserProfile.vue
│ │ ├── UpdateUser.vue
│ │ └── ParentComponent.vue
│ │ └── ChildComponent.vue
│ ├── App.vue
│ └── main.js
├── package.json
└── vite.config.js九、实际详细应用代码示例实现
完整示例：用户信息管理（组合使用 toRefs()）
toRefs()解构，实现双向绑定和响应式更新。9.1 父组件（ParentComponent.vue）
<!-- ParentComponent.vue -->
<template>
<div>
<h2>父组件 - 用户信息管理</h2>
<ChildComponent :userProps="user" />
<p>父组件中的用户信息 - 姓名: {{ user.name }}, 年龄: {{ user.age }}</p>
</div>
</template>
<script setup>
import { reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';
// 创建响应式对象
const user = reactive({
name: '赵六',
age: 40
});
</script>
<style scoped>
/* 简单样式，可根据需要调整 */
div {
margin-bottom: 15px;
}
p {
font-size: 18px;
color: #333;
}
</style>9.2 子组件（ChildComponent.vue）
<!-- ChildComponent.vue -->
<template>
<div>
<h3>子组件 - 编辑用户信息</h3>
<div>
<label>姓名:</label>
<input v-model="name" placeholder="请输入姓名" />
</div>
<div>
<label>年龄:</label>
<input v-model.number="age" type="number" placeholder="请输入年龄" />
</div>
<p>子组件中的用户信息 - 姓名: {{ name }}, 年龄: {{ age }}</p>
</div>
</template>
<script setup>
import { toRefs } from 'vue';
// 定义 props，接收父组件传递的响应式对象
const props = defineProps({
userProps: {
type: Object,
required: true
}
});
// 使用 toRefs() 将 props 中的响应式对象属性转换为 ref
const { name, age } = toRefs(props.userProps);
</script>
<style scoped>
/* 简单样式，可根据需要调整 */
div {
margin-bottom: 15px;
}
label {
display: inline-block;
width: 80px;
font-weight: bold;
}
input {
width: 200px;
padding: 5px;
margin-left: 10px;
}
p {
font-size: 18px;
color: #333;
}
</style>9.3 运行结果
-
父组件显示初始用户信息：姓名“赵六”，年龄“40”。 -
子组件中可以通过输入框修改姓名和年龄，视图实时更新，同时父组件中的用户信息也同步更新。 -
由于子组件使用了 toRefs()，解构后的name和age依然是响应式的，修改它们会同步更新父组件的响应式对象，从而触发父组件视图的更新。
十、运行结果
-
场景 1（模板解构）：用户可以在输入框中修改姓名和年龄，视图实时更新显示最新的用户信息，响应性保持。 -
场景 2（函数参数解构）：通过函数内部修改解构后的 ref属性，原始响应式对象的属性同步更新，视图实时反映变化。 -
场景 3（子组件解构）：子组件通过 props 接收父组件的响应式对象，使用 toRefs()解构后，子组件中对属性的修改会同步到父组件，实现双向绑定和响应式更新。
十一、测试步骤及详细代码
测试场景 1：模板中解构响应式对象
-
初始状态验证：打开页面，确认显示用户初始信息（如姓名“张三”，年龄“25”）。 -
修改属性验证：在输入框中修改姓名和年龄，确认视图实时更新显示最新的用户信息。 -
响应性验证：确认修改解构后的属性（通过 toRefs()）会同步更新原始响应式对象，触发视图更新。
测试场景 2：函数参数中解构响应式对象
-
初始状态验证：打开页面，确认显示用户初始信息（如姓名“李四”，年龄“30”）。 -
触发函数验证：点击“更新信息”按钮，确认姓名和年龄被函数内部修改（如姓名“王五”，年龄“35”），视图实时更新。 -
响应性验证：确认函数内部通过 toRefs()解构的属性修改会同步更新原始响应式对象。
测试场景 3：子组件中解构响应式对象
-
初始状态验证：打开页面，确认父组件和子组件均显示用户初始信息（如姓名“赵六”，年龄“40”）。 -
修改属性验证：在子组件的输入框中修改姓名和年龄，确认子组件和父组件中的用户信息实时同步更新。 -
响应性验证：确认子组件通过 toRefs()解构的属性修改会同步更新父组件的响应式对象，触发双向绑定。
十二、部署场景
1. 前端部署（静态资源）
-
Vite 项目：运行 npm run build生成dist目录，可将静态文件（HTML/CSS/JS）部署到 Nginx、Vercel、Netlify 等平台。 -
Vue CLI 项目：运行 npm run build生成dist目录，部署方式同上。
2. 与后端集成
-
若用户信息需要持久化存储（如保存到数据库），可在相关函数中调用后端 API（通过 fetch或axios），例如：const updateUser = async () => { const res = await fetch('/api/user', { method: 'POST', body: JSON.stringify({ name: user.name, age: user.age }), headers: { 'Content-Type': 'application/json' } }); const data = await res.json(); console.log('用户信息更新成功:', data); };
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）