当前位置：首页 > news >正文

reactive() 和 toRef()

news 来源：原创 2025/6/13 7:20:05

v-model是语法糖，常和ref 配合使用

v-model 是视图层的双向绑定工具，而 ref 是逻辑层的响应式数据载体或实例引用工具。两者在表单场景中通过 “v-model 绑定 ref 数据” 产生关联，但本质上解决的是不同层面的问题。ref在更底层。

为啥需要ref呢 vue毕竟是js为基，js 给基本变量赋值，是复制方式不是引用啊，所以要用ref包装进行处理。

v-model：双向绑定指令
本质是语法糖，用于表单元素（如 input、select 等）实现数据与视图的双向同步，内部会自动处理 input 事件和值绑定（value 或 modelValue）。

v-text与v-model ：

简单来说：v-text 是 “看数据”，v-model 是 “改数据”，前者用于展示，后者用于交互。

在 Vue3 中，reactive() 和 toRef() 虽然都与响应式数据相关，但它们的核心用途和实现机制不同。理解它们的差异需要从 响应式原理 和 引用关系 两个角度分析。

1. 核心差异：引用 vs. 代理

reactive()：创建深层响应式代理
- 将对象转换为响应式代理（Proxy），所有嵌套属性都会被递归转为响应式。
- 切断了原始对象与代理的直接引用关系（原始对象修改不会影响代理）。
- 示例：
```
import { reactive } from 'vue';const original = { name: '张三' };
const state = reactive(original);// 修改原始对象不会影响响应式代理
original.name = '李四';
console.log(state.name); // 仍为 '张三'
```
toRef()：创建单个属性的响应式引用
- 保持对原始对象属性的 只读引用，不创建新的响应式对象。
- 双向同步原始对象与引用（原始对象修改会影响引用，反之亦然）。
- 示例：
```
import { toRef } from 'vue';const original = { name: '张三' };
const nameRef = toRef(original, 'name');// 修改原始对象会影响引用
original.name = '李四';
console.log(nameRef.value); // 变为 '李四'
```

2. 为什么？需要 `toRef()`

（1）在解构响应式对象时保持响应性

当使用 reactive() 创建的对象被解构后，解构出的属性会失去响应性，而 toRef() 可以保持响应性。

示例：解构导致响应性丢失

import { reactive } from 'vue';const state = reactive({ name: '张三', age: 20 });
const { name } = state; // 解构出的 name 不是响应式的// 修改 state.name 不会影响 name 变量
state.name = '李四';
console.log(name); // 仍为 '张三'

解决方案：使用 toRef() 保持响应性

import { reactive, toRef } from 'vue';const state = reactive({ name: '张三', age: 20 });
const nameRef = toRef(state, 'name'); // 创建响应式引用// 修改 state.name 会影响 nameRef.value
state.name = '李四';
console.log(nameRef.value); // 变为 '李四'

（2）在组合式 API 中安全传递响应式属性

当需要将响应式对象的某个属性传递给其他函数或组件时，使用 toRef() 可以避免响应性丢失。

示例：传递响应式属性

import { reactive, toRef } from 'vue';const state = reactive({ name: '张三' });// 传递 name 属性的引用
const nameRef = toRef(state, 'name');// 在其他地方使用 nameRef，保持响应性
function updateName() {nameRef.value = '李四'; // 修改会同步到 state.name
}

（3）与第三方库集成时保持响应性

当需要将响应式数据传递给不支持 Vue 响应式的第三方库时，toRef() 可以作为中间层保持响应性。

示例：与非响应式 API 集成

import { reactive, toRef } from 'vue';const state = reactive({ loading: false });// 将 loading 转换为 ref 形式传递给第三方库
const loadingRef = toRef(state, 'loading');// 第三方库修改 loadingRef，会同步到 state.loading
thirdPartyAPI(loadingRef);