vue3.x 的 toRef详细解读
在 Vue 3.x 中,toRef 是一个用于创建响应式引用的工具函数。它可以将一个响应式对象的某个属性转换为一个独立的 ref 对象,同时保持与原始属性的响应式连接。以下是 toRef 的详细解读和示例。
1. toRef 的作用
核心功能
-
toRef用于从响应式对象(reactive对象)中提取一个属性,并将其转换为一个ref对象。 -
这个
ref对象会与原始属性保持同步:修改ref对象的值会更新原始属性,反之亦然。
使用场景
-
当你需要将响应式对象的某个属性单独提取出来,同时保持其响应性时。
-
当你需要将响应式对象的属性传递给组合式函数或组件时。
2. toRef 的基本用法
语法
import { reactive, toRef } from 'vue';const state = reactive({foo: 1,bar: 2,
});const fooRef = toRef(state, 'foo');
返回值
-
toRef返回一个ref对象,该对象与原始属性保持响应式连接。
3. toRef 的特性
-
响应式连接:
-
toRef创建的ref对象与原始属性保持同步。 -
修改
ref对象的值会更新原始属性,反之亦然。
-
-
非响应式属性的处理:
-
如果原始属性不存在,
toRef仍然会返回一个ref对象,但其值为undefined。 -
如果后续原始对象添加了该属性,
ref对象会自动更新。
-
-
与
ref的区别:-
ref创建一个独立的响应式引用,而toRef创建一个与原始属性绑定的响应式引用。
-
4. 示例代码
示例 1:基本用法
import { reactive, toRef } from 'vue';const state = reactive({foo: 1,bar: 2,
});const fooRef = toRef(state, 'foo');console.log(fooRef.value); // 输出: 1fooRef.value = 10; // 修改 ref 对象
console.log(state.foo); // 输出: 10,原始属性也被更新state.foo = 20; // 修改原始属性
console.log(fooRef.value); // 输出: 20,ref 对象也被更新
解释:
-
fooRef是通过toRef从state中提取的ref对象。 -
修改
fooRef.value会更新state.foo,反之亦然。
示例 2:与非响应式属性的交互
import { reactive, toRef } from 'vue';const state = reactive({foo: 1,
});const barRef = toRef(state, 'bar'); // bar 属性不存在console.log(barRef.value); // 输出: undefinedstate.bar = 2; // 添加 bar 属性
console.log(barRef.value); // 输出: 2,ref 对象自动更新
解释:
-
即使
bar属性最初不存在,toRef仍然会返回一个ref对象。 -
当
bar属性被添加到state时,barRef会自动更新。
示例 3:在组合式函数中使用 toRef
import { reactive, toRef } from 'vue';function useFeature(state) {const fooRef = toRef(state, 'foo');function increment() {fooRef.value++;}return {fooRef,increment,};
}const state = reactive({foo: 1,
});const { fooRef, increment } = useFeature(state);console.log(fooRef.value); // 输出: 1increment();
console.log(state.foo); // 输出: 2
解释:
-
在组合式函数
useFeature中,使用toRef提取state.foo并返回。 -
调用
increment函数会更新state.foo。
5. toRef 与 toRefs 的区别
| 特性 | toRef | toRefs |
|---|---|---|
| 作用对象 | 单个属性 | 整个对象 |
| 返回值 | 单个 ref 对象 | 包含所有属性的 ref 对象的普通对象 |
| 使用场景 | 提取单个属性并保持响应式连接 | 解构整个对象并保持响应式连接 |
6. 注意事项
-
.value访问:toRef返回的是一个ref对象,因此需要通过.value访问其值。 -
原始属性的存在性:
如果原始属性不存在,toRef仍然会返回一个ref对象,但其值为undefined。 -
性能优化:
使用toRef可以减少不必要的响应式转换,从而提高性能。
7. 总结
-
toRef用于从响应式对象中提取单个属性,并将其转换为一个ref对象。 -
这个
ref对象与原始属性保持响应式连接,修改其中一个会更新另一个。 -
toRef适用于需要提取单个属性并保持响应式连接的场景,例如在组合式函数或组件中传递属性。
相关文章:
vue3.x 的 toRef详细解读
在 Vue 3.x 中,toRef 是一个用于创建响应式引用的工具函数。它可以将一个响应式对象的某个属性转换为一个独立的 ref 对象,同时保持与原始属性的响应式连接。以下是 toRef 的详细解读和示例。 1. toRef 的作用 核心功能 toRef 用于从响应式对象&#x…...
wordpress资讯类网站整站打包
wordpress程序,内置了价值499元的模板.但是有了模板没有全自动采集相信大多数人都搞不懂,目录那么多,全靠原创几乎是不可能的事情,除非你是大公司,每人控制一个板块, 这套源码里面最有价值的应该是这个采集…...
GitHub基本操作及Git简单命令
GitHub简介 GitHub就是一个远程仓库,远程仓库可以理解为就是一个可以保存自己代码的地方,在实际开发当中一个项目往往是有多个人来共同协作开发完成的,那么就需要一个统一代码保存的地方,而GitHub就是起到一个共享和汇总代码的作…...
记一次MySQL故障解决
记一次MySQL故障解决 1 故障现象2 故障排查2.1 查看MySQL服务状态2.2 查看服务日志 3 解决方法3.1 增加 wait_timeout 和 interactive_timeout 参数的值,确保连接不会因超时而被关闭:3.2 检查服务已经恢复正常,不过以上只是临时修改ÿ…...
DeepSeek-R1私有化部署教程 | Linux服务器搭建AI大语言模型
**云服务器用LinuxDockerOllamaOpenWebUI部署DeepSeek-R1大语言模型(LLMs),DeepSeek本地化部署教程(在自己电脑上部署也可以参考此教程)。**超详细教程,手把手。 在当今数字化时代,大型语言模型…...
「软件设计模式」桥接模式(Bridge Pattern)
深入解析桥接模式:解耦抽象与实现的艺术 一、模式思想:正交维度的优雅解耦 桥接模式(Bridge Pattern)通过分离抽象(Abstraction)与实现(Implementation),使二者可以独立…...
【Flink快速入门-5.流处理之多流转换算子】
流处理之多流转换算子 实验介绍 前面实验中介绍的算子已经能够满足我们的大部分开发需求了,但是在实际工作中有时候还会遇到一些业务场景,例如需要摄入多个输入流并将其合并处理,或者需要将一条输入流分割为多条子流,在不同的子…...
react传递函数与回调函数原理
为什么 React 允许直接传递函数? 回调函数核心逻辑 例子:父组件控制 Modal 的显示与隐藏 // 父组件 (ParentComponent.tsx) import React, { useState } from react; import { Modal, Button } from antd; import ModalContent from ./ModalContent;co…...
华为云kubernetes基于keda自动伸缩deployment副本(监听redis队列长度)
1 概述 KEDA(Kubernetes-based Event-Driven Autoscaler,网址是https://keda.sh)是在 Kubernetes 中事件驱动的弹性伸缩器,功能非常强大。不仅支持根据基础的CPU和内存指标进行伸缩,还支持根据各种消息队列中的长度、…...
Spring源码分析のBean扫描流程
文章目录 前言一、scanCandidateComponents1.1 isCandidateComponent1.1.1、排除/包含过滤器1.1.2、条件装配1.1.3、重载一1.1.4、重载二1.1.5、补充:Lookup注解 总结 前言 原生的Spring在构造ApplicationContext时,会调用refresh方法。其中就包含了扫描…...
Ubuntu安装docker:docker-desktop : 依赖: docker-ce-cli 但无法安装它、无法定位软件包 docker-ce-cli
具体错误 sudo apt-get install ./docker-desktop-amd64.deb [sudo] password for weiyu: 正在读取软件包列表... 完成 正在分析软件包的依赖关系树... 完成 正在读取状态信息... 完成 注意,选中 docker-desktop 而非 ./docker-desktop-amd64.de…...
基于大数据的奥运会获奖数据分析系统设计与实现
【大数据】基于大数据的奥运会获奖数据分析系统设计与实现(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统通过集成先进的数据抓取、处理、存储与可视化技术,为深入理解奥运会…...
数据结构 堆和priority_queue
一、堆的定义 堆(heap),是⼀棵有着特殊性质的完全⼆叉树,可以⽤来实现优先级队列(priorityqueue)。 堆需要满⾜以下性质: 1. 是⼀棵完全⼆叉树; 2. 对于树中每个结点,如…...
Dockerfile 编写推荐
一、导读 本文主要介绍在编写 docker 镜像的时候一些需要注意的事项和推荐的做法。 虽然 Dockerfile 简化了镜像构建的过程,并且把这个过程可以进行版本控制,但是不正当的 Dockerfile 使用也会导致很多问题。 docker 镜像太大。如果你经常使用镜像或者…...
【抽象代数】1.2. 半群与群
群的定义 群非空集合二元运算性质 定义1. 设 为一个非空集合,上有二元运算,满足结合律,则称或为一个半群。 定义2. 设 为半群,若元素 满足 ,则称 为 的左幺元(右幺元:)&#…...
Django中实现简单易用的分页工具
如何在Django中实现简单易用的分页工具?📚 嗨,小伙伴们!今天我们来看看如何在 Django 中实现一个超简单的分页工具。无论你是在处理博客文章、产品列表,还是用户评论,当数据量一大时,分页显得尤…...
「软件设计模式」装饰者模式(Decorator)
深入解析装饰者模式:动态扩展功能的艺术(C实现) 一、模式思想与应用场景 1.1 模式定义 装饰者模式(Decorator Pattern)是一种结构型设计模式,它通过将对象放入包含行为的特殊封装对象中,动态地…...
CI/CD(二)docker-compose安装Jenkins
1、docker-compose.yml version: 3.8services:jenkins:image: jenkins/jenkins:lts # 使用官方的 Jenkins LTS 镜像container_name: jenkinsuser: root # 如果需要以 root 用户运行ports:- "8080:8080" # Jenkins Web 界面端口- "50000:50000" # 用于 Jen…...
OpenCV机器学习(1)人工神经网络 - 多层感知器类cv::ml::ANN_MLP
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::ml::ANN_MLP 是 OpenCV 库中的一部分,用于实现人工神经网络 - 多层感知器(Artificial Neural Network - Multi-Layer…...
ProxySQL构建PolarDB-X标准版高可用路由服务三节点集群
ProxySQL构建PolarDB-X标准版高可用路由服务三节点集群 一、PolarDB-X标准版主备集群搭建 三台机器上传 polardbx 包,包可以从官网https://openpolardb.com/download获取,这里提供离线rpm。 1、上传 polardbx 安装包 到 /opt目录下 rpm -ivh t-pol…...
VSCode 2026容器化调试全面升级:从Docker Compose到Kind集群的零配置热重载实操手册
更多请点击: https://intelliparadigm.com 第一章:VSCode 2026容器化调试增强教程 VSCode 2026 引入了原生支持 OCI 容器运行时的调试代理(Dev Container Debug Agent),可直接在容器内启动语言服务、断点注入与内存快…...
告别网盘限速烦恼:LinkSwift直链下载助手完整指南
告别网盘限速烦恼:LinkSwift直链下载助手完整指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ,支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘…...
Minecraft存档修复终极指南:使用Region Fixer拯救你的像素世界
Minecraft存档修复终极指南:使用Region Fixer拯救你的像素世界 【免费下载链接】Minecraft-Region-Fixer Python script to fix some of the problems of the Minecraft save files (region files, *.mca). 项目地址: https://gitcode.com/gh_mirrors/mi/Minecraf…...
从零开始的手写数字识别实战:homemade-machine-learning MNIST分类完整指南
从零开始的手写数字识别实战:homemade-machine-learning MNIST分类完整指南 【免费下载链接】homemade-machine-learning 🤖 Python examples of popular machine learning algorithms with interactive Jupyter demos and math being explained 项目地…...
XA分布式事务
XA基本原理 在分布式数据库(如你正在研究的 TDSQL)中,XA 分布式事务是保证跨多个节点操作时数据“要么全成功,要么全回滚”的标准方案。它是一种基于强一致性的设计,在金融级场景中应用广泛。 1. 什么是 XA?…...
智能语音助手评估框架VoiceAssistant-Eval解析
1. 项目背景与核心价值去年我在参与一个智能客服项目时,团队花了整整三个月时间反复调整语音助手的响应逻辑。当时最头疼的问题就是缺乏系统化的评估标准——我们既要知道它"能不能用",更要清楚"哪里不够好"。这正是VoiceAssistant-…...
Jexactyl:基于Docker的现代化游戏服务器控制面板部署与运维指南
1. 项目概述:一个为游戏服务器管理而生的现代控制面板如果你运营过游戏服务器,无论是《我的世界》、Valheim还是其他基于SteamCMD的游戏,你大概率经历过这样的痛苦:在Linux命令行里敲打各种晦涩的命令,手动管理服务端文…...
ARM TrustZone与AHB5总线安全机制详解
1. ARM TrustZone安全机制深度解析 在嵌入式系统安全领域,ARM TrustZone技术已经成为硬件级安全方案的行业标准。我第一次接触这项技术是在开发一款金融支付终端时,当时我们需要在同一个Cortex-A53处理器上同时运行支付应用和第三方应用,而Tr…...
Windows驱动管理终极指南:Driver Store Explorer完全解析,轻松释放数GB磁盘空间
Windows驱动管理终极指南:Driver Store Explorer完全解析,轻松释放数GB磁盘空间 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 你是否发现Windows系统盘空间越来…...
OpenClaw AI Agent会话实时监控仪表盘:零配置部署与深度使用指南
1. 项目概述:一个为AI Agent会话打造的实时监控仪表盘如果你正在使用OpenClaw这类AI Agent框架进行开发或日常使用,那你一定遇到过这样的场景:Agent在后台默默运行,处理着复杂的对话和工具调用,但你却对它的“内心活动…...
