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…...
鲟龙科技冲刺港股:靠卖鱼子酱年营收7.7亿 王斌控制35%股权
雷递网 雷建平 5月6日杭州千岛湖鲟龙科技股份有限公司(简称:“鲟龙科技”)日前递交招股书,准备在港交所上市。鲟龙科技2023年、2024年及2025年分别宣派股息8160万元、零元及1.35亿元。截至最后实际可行日期,所有于往绩…...
AI数字分身构建指南:从数据蒸馏到人格封装的技术实践
1. 项目概述:从“被蒸馏”到“主动蒸馏”的认知跃迁2026年,一个词正在悄然重塑我们与数字世界的关系:蒸馏。它不再是实验室里的化学过程,而是指将一个人散落在聊天记录、社交媒体、文档中的数字碎片,通过AI技术&#x…...
MDB Tools深度实战:如何在Linux和macOS上高效操作Access数据库的完整解决方案
MDB Tools深度实战:如何在Linux和macOS上高效操作Access数据库的完整解决方案 【免费下载链接】mdbtools MDB Tools - Read Access databases on *nix 项目地址: https://gitcode.com/gh_mirrors/md/mdbtools 在跨平台数据迁移和集成工作中,Micro…...
Windows系统srchadmin.dll文件丢失无法启动程序解决
在使用电脑系统时经常会出现丢失找不到某些文件的情况,由于很多常用软件都是采用 Microsoft Visual Studio 编写的,所以这类软件的运行需要依赖微软Visual C运行库,比如像 QQ、迅雷、Adobe 软件等等,如果没有安装VC运行库或者安装…...
LocalAI:开源本地大模型推理服务器,兼容OpenAI API的私有化部署方案
1. 项目概述:当大模型遇见本地化 最近几个月,我身边不少搞开发的朋友都在讨论一个事儿:怎么才能在自己电脑上,或者公司内网里,低成本、安全地跑起来那些动辄几十上百亿参数的大语言模型?无论是想做个内部知…...
Stripe科里森 X OpenAI奥特曼的长谈
作者|高飞(旧金山报道)这两天在旧金山参加 Stripe Sessions 2026。旧金山当地时间4月30日下午,最后一场是炉边对话,原定日程写的是:Stripe 联合创始人 Patrick Collison(帕特里克科里森…...
TVA与传统视觉技术的本质区别——以工业视觉检测为例(20)
重磅预告:本专栏将独家连载新书《AI视觉技术:从入门到进阶》精华内容。本书是《AI视觉技术:从进阶到专家》的权威前导篇,特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“AI教…...
在自动化测试流程中集成多模型API调用以提升测试覆盖率
在自动化测试流程中集成多模型API调用以提升测试覆盖率 1. 自动化测试中多模型调用的必要性 现代软件产品与AI能力的结合日益紧密,但不同模型厂商的API行为可能存在细微差异。单一模型测试无法覆盖所有可能的交互场景,这为产品质量埋下隐患。通过Taoto…...
5分钟掌握PowerToys文本提取器:免费OCR工具终极使用指南
5分钟掌握PowerToys文本提取器:免费OCR工具终极使用指南 【免费下载链接】PowerToys Microsoft PowerToys is a collection of utilities that supercharge productivity and customization on Windows 项目地址: https://gitcode.com/GitHub_Trending/po/PowerTo…...
Java-RPG-Maker-MV-Decrypter:三步快速解密RPG游戏资源的终极工具
Java-RPG-Maker-MV-Decrypter:三步快速解密RPG游戏资源的终极工具 【免费下载链接】Java-RPG-Maker-MV-Decrypter You can decrypt whole RPG-Maker MV Directories with this Program, it also has a GUI. 项目地址: https://gitcode.com/gh_mirrors/ja/Java-RPG…...
