Vue 3中,`toRef` 和 `toRefs`

news/2024/9/24 6:27:49/

在Vue 3中,`toRef` 和 `toRefs` 是两个帮助函数,它们用于从 `reactive` 对象中提取出响应式的引用。这两个函数在处理复杂的响应式状态或者在组合式API中非常有用。

### toRef

`toRef` 创建一个 `ref` 对象,它是一个对于 `reactive` 对象中某个属性的响应式引用。

**简单应用例子:**

```javascript
import { reactive, toRef } from 'vue';

const state = reactive({
  username: 'JohnDoe',
  age: 30
});

// 使用 toRef 从 reactive 对象中提取一个属性作为 ref
const usernameRef = toRef(state, 'username');

// 现在 usernameRef 是一个 ref 对象,它的 value 属性是响应式的
console.log(usernameRef.value); // 输出: 'JohnDoe'

// 修改 reactive 对象中的 username 属性
state.username = 'Alice';

// usernameRef 的 value 也随之更新,保持响应性
console.log(usernameRef.value); // 输出: 'Alice'
```

### toRefs

`toRefs` 接受一个 `reactive` 对象,并将其所有属性转换为一个包含 `ref` 对象的数组。

**简单应用例子:**

```javascript
import { reactive, toRefs } from 'vue';

const state = reactive({
  username: 'JohnDoe',
  age: 30
});

// 使用 toRefs 将 reactive 对象转换为多个 ref 对象
const { username, age } = toRefs(state);

// username 和 age 现在都是 ref 对象,它们的 value 属性是响应式的
console.log(username.value); // 输出: 'JohnDoe'
console.log(age.value);      // 输出: 30

// 修改 reactive 对象中的 age 属性
state.age = 31;

// age 的 value 也随之更新,保持响应性
console.log(age.value);      // 输出: 31
```

### 使用场景

- **跨组件传递**:当你需要将一个响应式状态作为多个 `ref` 对象传递给子组件时,`toRefs` 非常有用。
- **保持响应性**:在将响应式状态解构为单独的 `ref` 对象后,仍然希望保持其响应性,`toRef` 和 `toRefs` 可以帮你做到这一点。
- **函数参数**:如果你需要将响应式状态作为参数传递给函数,并且希望这些参数保持响应性,`toRef` 可以创建单独的 `ref` 对象。

### 注意事项

- `toRef` 和 `toRefs` 创建的 `ref` 对象与原始的 `reactive` 对象共享响应性依赖。如果原始对象被销毁,那么由 `toRef` 或 `toRefs` 创建的 `ref` 对象也会失去响应性。
- 当使用 `toRefs` 解构 `reactive` 对象时,每个 `ref` 对应于原对象的一个属性,并且它们都引用同一个 `reactive` 状态。

这两个函数提供了一种灵活的方式,让你可以在Vue 3的响应式系统中以解构和模块化的方式工作。


http://www.ppmy.cn/news/1451856.html

相关文章

【matlab基础知识】(五)三维曲线绘制

参数方程 >> t0:0.01:2*pi; xt.^3.*sin(3*t).*exp(-t);yt.^3.*cos(3*t).*exp(-t);zt.^2;plot3(x,y,z),grid >> [x,y]meshgrid(-3:0.1:3,-2:0.1:2); z(x.^2-2*x).*exp(-x.^2-y.^2-x.*y); >> mesh(x,y,z) 用点运算的形式来构造Z矩阵 surf(x,y,z&a…

Windows Server安装DHCP和DNS

前言 本期将教大家如何在Windows server上部署DHCP服务和DNS服务,用于模拟给内网主机分配IP地址。虽然用于演示的系统比较老,如果在新版本如Windows server2016、19、22上部署,操作基本一致。在此之前先给大家科普一波理论,需略过…

深入探究TCP/IP协议

一、引言 在信息技术飞速发展的今天,网络已成为人类社会不可或缺的部分。实现网络中计算机相互通信的关键之一便是TCP/IP协议。作为互联网的基础,TCP/IP协议确保了全球范围内的数据交换和信息共享。本文将深入探讨TCP/IP协议的概念、特点、组成、相关协…

文件API及其操作

这里介绍两类文件操作、三个文件类。包括文件系统操作(File类)、文件内容操作(操作字节流、操作字符流) 1.文件类File 1.1.认识File类 (1)什么是File类呢?其实就是可以操作文件的一个类。通过…

从零开始搭建一个vue项目

从零开始搭建一个vue项目 一、环境准备 1.1 安装node.js 选择合适的LTS版本,然后下载安装,安装地址:https://nodejs.org/en/download 在命令行中查看已安装的node.js版本 node -v v14.14.01.2 切换为淘宝的镜像源 解决国内下载慢的问题,…

GDPU JavaWeb 猜字母游戏

他在对你重定向打卡的大饼与立即跳转到你面前的谎言之间反复横跳。 sendRedirect与forward sendRedirect与forward区别 sendRedirect用于将请求重定向到另一个资源,可以是同一个应用程序内的其他 Servlet,也可以是其他 Web 应用程序的资源,…

onedrive下載zip檔案有20G限制,如何解決

一般來說,OneDrive網頁版對文件下載大小的限制如下圖所示,更多資訊,請您參考這篇文章:OneDrive 和 SharePoint 中的限制 - Microsoft Support 因此我們推薦您使用OneDrive同步用戶端來同步到本地電腦,您也可以選擇只同…

jenkins 部署springboot 项目

文章目录 持续集成指定tag发布 基于Jenkins拉取GitLab的SpringBoot代码进行构建发布到测试环境实现持续集成 基于Jenkins拉取GitLab指定发行版本的SpringBoot代码进行构建发布到生产环境实现CD实现持续部署 持续集成 为了让程序代码可以自动推送到测试环境基于Docker服务运行…