【Vue3 第六章】ref、toRef、toRefs、toRaw 方法应用

已于 2023-09-01 09:40:42 修改
阅读量6.5k 收藏 14
点赞数 6
分类专栏： Vue 前端开发知识 文章标签： javascript 前端 vue.js
于 2022-12-29 16:10:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39335404/article/details/128483626
版权

文章目录

前言

Vue3中新增了几种创建响应式数据的方法，其各自的作用当然也不尽相同，每一种方法都有其自己的应用场景，今天我们来聊聊什么是ref toRef和toRefs？三者在使用方式上有什么不同？最佳的使用方式是什么？

它们主要用于对响应式对象的结构，即：

  • 在不丢失响应式的情况下对对象进行解构
  • 针对的是响应式对象，不是普通对象
  • 是响应式的延续，不创造新的响应式

一、toRef()

toRef() 函数基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【Vue3 知识第七讲】reactive、shallowReactive、toRef、toRefs 等系列方法应用与对比
前端知识分享喵
09-04 2092
reactive、shallowReactive 等系列方法应用与对比
Vue3学习 创建Vue3项目、ref、reactive、setup、Vue3生命周期、Composition API
2301_77358195的博客
10-27 717
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。注意事项：一般会创建一个hooks文件夹，然后在里面写相应的 useXxx.js 文件})})return {x,y。
Vue3相关的10个常见问题
m0_46219714的博客
03-27 823
答：在Vue3中，可以使用directive()方法创建自定义指令。import {});答：下面以一个最简单的计数器为例，首先编写一段js文件用于封装计数器的相关逻辑} return {这个逻辑很简单，它暴露了一个计数器 count 和一个用于增加计数器的函数 increment。接着，在组件中使用 setup 函数并调用useCountsetup() {const {return {} };
学习vue3中遇到的问题及知识总结（持续更新状态）
m0_68384650的博客
03-10 987
1.pinia持久化插件使用的地址问题一在安装依赖时容易停留在idealTree:vue3-pinia-demo: sill idealTree buildDeps进度条卡住方法：请按照以下步骤：删除 C:\Users账户中的 .npmrc 文件在命令提示符里执行 npm cache verify在命令提示符里执行 npm config set registry https://registry.npmmirror.com 切换淘宝源之后再次执行 npm i 即可。2.包管理器的升级。
vue3中 toRow 的使用说明
最新发布
BillKu的博客
04-17 531
toRaw是 Vue 3 响应式系统的一个底层工具，用于在需要时操作原始数据。在大多数业务场景中应优先使用响应式 API，仅在必要时（如性能优化或兼容性处理）使用toRaw。
Vue3的reactive、ref、toRefs、toRef、toRaw 和 markRaw处理响应式数据区别
m0_72030584的博客
01-09 796
本文主要讲解这个ref、reactive、toRef、toRefs用于实现数据的响应式，toRaw用于获取响应式对象的原始数据，而markRaw则用于将一个对象标记为非响应式
VUE3学习 第三章 认识 ref全家桶、Reactive全家桶、to系列全家桶、computed计算属性、watch侦听器、watchEffect高级侦听器
m0_55170432的博客
11-07 768
学习
vue3-api之toRaw() 和markRaw()
weixin_43550562的博客
05-27 323
markRaw 方法可以将一个对象标记为“非响应式”，从而使其不会被 reactive 包裹，也就不会成为 Vue3 中的响应式对象。这样做可以避免对 obj 的修改引起意外的响应式更新。toRaw 方法可以将一个被 reactive 包裹的对象还原为其中的“原始”对象，从而使其不再具有任何。所以在使用 markRaw 方法时，我们需要确保这个对象在后续的代码中不需要作为响应式对象来使用或者监听其变化。一旦一个对象被标记为“非响应式”，它就无法再被 reactive 进行包裹成为响应式对象。
vue3常见问题
weixin_63519743的博客
05-14 352
在 setup() 函数中，我们使用 ref()、reactive() 等函数来创建响应式数据。通过 return 将这些数据暴露给模板，我们可以确保当数据变化时，模板也会得到更新。避免全局污染：如果不使用 return 来暴露数据，而是在 setup() 函数内部直接操作全局变量或对象，那么这可能会导致全局污染和难以追踪的 bug。通过 return，我们可以确保只暴露必要的数据和方法，从而避免全局污染。可读性和可维护性：通过明确返回的数据和方法，其他开发人员可以更容易地理解组件的用途和工作原理。
关于Vue3实践的一些问题清单
LuckyWinty的博客
10-22 558
前言瞪瞪，胖琴的第三篇文章来袭！近期在自己的规划中列着一份 vue3 清单。关于 vue3，虽然之前很早就看过了，但是也只是简单的了解一番写了几个小 demo，而且我司的主要技术栈也是 v...
【vue3】关于ref、toRef、toRefs那些事
嗨，朋友你好！我是前端领域的工作者
04-02 3649
vue3项目中关于ref、toRef、toRefs的使用详解
Vue3 使用 toRef toRefs toRaw
qq_52099965的博客
10-21 294
Vue3 使用 toRef toRefs toRaw
vue3 常见问题汇总
热门推荐
前端开发者
04-25 1万+
vue3 常见问题汇总 简介：vue3 beta 已经出来一段时间了，最近刚好有时间，就练了练手，练手过程中遇到的问题，总结如下 本文 github 源码地址 下面是问题 vue3 如何注册全局组件 import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // 注册全局组件 im...
vue3 尚硅谷vue3入门到实战
wk964269669的博客
07-03 1127
vue3 基础知识
关于维护vue3的响应式的那些事：unref、toRef、toRefs、toRaw、toValue
qq_42238378的博客
03-23 2281
常常用于获取ref定义的响应式数据的原始数据；toRef函数用于创建一个响应式引用，该引用指向响应式对象的某个属性。这样，即使你将这个属性的引用传递到其他地方，它仍然保持响应性。当原始对象的属性值发生变化时，toRef创建的引用也会更新，不能用于ref定义的响应式数据，否则跟上面一样用了白用,。两种情景： 不能用于ref定义的数据： 在Vue 3中，toRefs函数用于将一个响应式对象转换为一个普通对象，其中每个属性都是一个r ef，指向原始对象的相应属性。这意味着你可以将一个响应式对象的所有属性一次
vue3遇到问题整理（不定期更新）
宝拉天天想放假
11-24 1693
1.is="vue:script" <div is="vue:script" src="https://p.bokecc.com/player?newversion=true" type="text/javascript" /> 2.Volar vscode中插件的安装使用 3.reatvie，ref，unref，toRef/toRefs/isRef reatvie 对应用类型数据进行包裹，使其称为响应式的数据， vue不建议使用原对象（应用类型数据）， 而直接使用包裹后的数据，因为
初识Vue3常见问题合集
wxid_mtnujb6ipc0322的博客
10-07 942
如图：用npm create vite@latest创建号项目后，在main.js中我们可以看见“vue”会标红，并提示找不到模块“vue”1、根据提示在中将的值改为node2、项目跟目录的xxx.d.ts文件中加入。
【Vue3】如何理解ref toRef和toRefs
Mr.J的博客
08-25 1603
Vue3中新增了几种创建响应式数据的方法，其各自的作用当然也不尽相同，每一种方法都有其自己的应用场景，今天我们来聊聊什么是ref toRef和toRefs？三者在使用方式上有什么不同？最佳的使用方式是什么？
vue3中ref ,toref,torefs、
03-20
在Vue 3中，ref是一个函数，用于创建一个响应式的数据引用。它接收一个初始值作为参数，并返回一个包含value属性的对象。这个value属性可以读取和修改，当value发生变化时，相关的组件会自动重新渲染。 toref是一个函数，用于将一个普通的JavaScript对象转换为响应式的ref对象。它接收一个普通对象作为参数，并返回一个ref对象。 torefs是一个函数，用于将一个普通的JavaScript数组转换为响应式的ref对象数组。它接收一个普通数组作为参数，并返回一个ref对象数组。 这些函数在Vue 3中的使用示例如下： ```javascript import { ref, toRef, toRefs } from &#39;vue&#39;; // 使用ref创建一个响应式的数据引用 const count = ref(0); // 使用toref将普通对象转换为响应式的ref对象 const obj = { name: &#39;John&#39;, age: 20 }; const nameRef = toRef(obj, &#39;name&#39;); // 使用torefs将普通数组转换为响应式的ref对象数组 const arr = [1, 2, 3]; const arrRefs = toRefs(arr); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MagnumHou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值