vue3中的torefs和toref区别及常用属性解析

已于 2024-07-17 11:28:00 修改
阅读量172 收藏 4
点赞数 9
文章标签： 前端 vue3 torefs watch
于 2024-07-15 11:28:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43617604/article/details/140432184
版权

文章目录

reactive（） toRefs() toRef（）

你在页面中使用了reactive（）函数定义对象中的key，value属性 想在页面上直接使用key 且不用person.key
(这种写法很麻烦)，那么你可以使用toRefs属性将定义的对象结构转化 ，修改值需要key.value

代码如下：

在这里插入图片描述
总结 toRefs ,toRef 都是把响应式对象 中key value 取出来 并且具备响应式能力
区别： toRefs 可以一次性结构出来， toRef 只能一个一个取

compoted（）

用法如下图
在这里插入图片描述

在这里插入图片描述

监视器watch（） 解除监视器stopWatch()

监听的key不需要。value
在这里插入图片描述
解除监视器stopWatch()
在这里插入图片描述

watchEffect

当满足你的条件时才会粗发逻辑
可以监听响应式数据
在这里插入图片描述

在这里插入图片描述

前端成长营
关注
  • 9
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue3中toRefs与toRef的使用详情
前端-小鑫
07-27 1762
torefs 将结构解析出来的值具有响应式 toRefs原理原本是proxy({name:'aa'})toRefs转换后变成{name:proxy(value:'aa')} 例子如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt...
详解Vue3.0中 ref、reactive、toRef、toRefs 四个核心API函数作用及使用场景
izl040905的博客
02-16 1441
最近刚学习完了 Vue3.0，V3在响应式数据的声明上不再使用原来的选项式 data 进行 retuan 返回的形式，取而代之的是通过变量修饰符使用ref、reactive 进行手动声明的方式。相较于 Vue2.0 确实是更加灵活了许多，Vue3.0(以下简称V3)中进行响应式数据操作会使用ref、reactive、toRef、toRefs四个核心 API 函数，那么今天就从解析以下其各个作用及其使用场景。
Vue3中 toRefs的基本使用
weixin_44684357的博客
08-23 311
把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref；期望： 页面上展示 “小明=========…”；实际：页面展示"小明"，myData中name 无法响应。--通过方式一，无法响应--> <!-- <h3>{{ myData.name }}</h3> 通过方式二，可以响应 --> </ template > < script lang = " ts " > const myData = reactive({
vue3 toRefs详解
热门推荐
哈
07-10 3万+
toRefs函数的作用是将响应式对象中的所有属性转换为单独的响应式数据，对象成为普通对象，并且值是关联的。在这个过程中toRefs会做以下两件事：应用场景： 注意：响应式对象的处理，是加给对象的，如果对对象做了展开操作，那么就会丢失响应式的效果。所以上面代码，单击button时，不能改变页面显示效果。 本次单击按钮可以实现修改效果。...
vue3 中的 toRefs 是什么？ 什么时候用？
Kill_paradise的博客
02-16 5444
定义： toRefs可以将对象（只能接收rective对象）中的属性变成响应式 正常reactive对象数据也是响应式的，如果用toRefs解构出去会更加方便 什么时候用？ 数据量如果很多， 我们一般会用解构来简化代码， 那么在vue3 中如果使用对象的解构， 会让改对象失去响应式， 所有一般解构的时候 借助 toRefs 来解构 仍然带有响应式 解构后， 我们就不需要 用 对象.属性了， 而是可以直接使用属性，来简化 <h3>{{name}}</h3> let o
vue3 toRef和toRefs的使用
qq_44472790的博客
10-16 1236
toRef和toRefs 作用：创建一个ref对象,其value指向另一个对象中得某一个属性 语法：const name = toRef(data,‘name’) 应用：要将响应式对象中得某个属性单独提供给外部使用时 拓展：toRefs与toRef功能一致 但可以批量创建多个ref对象 语法：toref(data) 为了能在template写的简短,引用toRef处理 被toRef包裹的响应式,修改时候直接读取原来响应式reactive代理属性 实时响应变化 不使用toRef则响应式的修改就会出现Bug /
Vue3中toRef的使用(彻底清楚搞懂toRef和toRefs是什么)
weixin_48952990的博客
06-06 2444
Vue3中toRef的使用
vue3.0学习笔记 (toRef和toRefs)
m0_58849641的博客
07-09 925
2.运用toRef的写法 2.运用toRefs的写法 总结:toRef是智能一个转换，toRefs是全部转换。类似于前端的深拷贝和浅拷贝。toRefs拷贝出来的是一个对象，所以要用解构语法解构他。并且toRefs拷贝出来的外面那一层，遇到复杂的还要慢慢找到他这个变量...
# Vue3 toRef 和 toRefs 函数.doc
07-11
Vue3 中的 toRef 和 toRefs 函数详解 在 Vue3 中，响应式数据是一种非常重要的概念，它使得我们的应用程序能够实时更新数据，从而提高用户体验。那么，在 Vue3 中，我们如何创建响应式数据呢？这篇文章将介绍 Vue3 ...
Vue 3 中的 toRefs：响应式数据的关键函数
07-27
Vue 3 中的 `toRefs` 函数是响应式编程中的一个重要工具，它主要用于将一个响应式对象的各个属性转化为独立的响应式引用（ref），这样在模板中直接使用这些属性时仍然能保持其响应性。这个功能在处理复杂的数据结构...
vue3源码解析 vue3源码解析 vue3源码解析 vue3源码解析
07-02
Vue3的响应式系统基于新的ES Proxy对象实现，可以监听对象的属性访问和修改。当数据发生变化时，通过依赖收集和派发更新机制，自动触发视图的更新。相比于Vue2的Object.defineProperty，Proxy提供了更全面的拦截...
【JavaScript源代码】Vue3中ref与toRef的区别浅析.docx
12-29
在Vue3中，`ref`和`toRef`都是用于创建响应式数据的工具，但它们之间存在着重要的差异。理解这些差异对于有效地管理Vue3应用的状态至关重要。 首先，`ref`用于创建一个响应式的引用，它实际上是对一个值的封装。当...
vue3.x中使用cesium，vue3.x+Cesium
05-04
Vue3.x是一个流行的JavaScript前端框架，它提供了许多优化和改进，使得开发更加高效。Cesium则是一个强大的3D地球浏览器库，广泛应用于地理信息系统、虚拟现实和游戏开发等领域。将Cesium集成到Vue3.x项目中，可以...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 484
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1025
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
前端JS总结（中）
m0_54066656的博客
08-12 607
前端JS之内置对象总结，这很重要！！！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 610
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 743
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
js深度解构
最新发布
Zing_ing的博客
08-12 264
深度解构（Deep Destructuring）是指在解构赋值中，解构对象或数组中的嵌套结构。它允许你从复杂的数据结构中直接提取所需的嵌套数据，使代码更加简洁明了。
vue3 torefs 和 toref
10-17
`toRefs` 和 `toRef` 都是 Vue 3 中的 Composition API 中的函数，用于将响应式对象转换为普通对象或将普通对象转换为响应式对象。 `toRefs` 可以将一个响应式对象的所有属性都转换为普通对象，每个属性都是一个 ref 对象，这样就可以在模板中使用解构语法来访问这些属性。例如： ```javascript import { reactive, toRefs } from 'vue' const state = reactive({ count: 0, message: 'Hello World' }) export default { setup() { const { count, message } = toRefs(state) return { count, message } } } ``` 在模板中使用： ```html <template> <div> <p>Count: {{ count }}</p> <p>Message: {{ message }}</p> </div> </template> ``` `toRef` 则是将一个普通对象的某个属性转换为 ref 对象，这样就可以在模板中使用解构语法来访问这个属性。例如： ```javascript import { ref, reactive, toRef } from 'vue' const state = reactive({ count: 0, message: 'Hello World' }) export default { setup() { const countRef = toRef(state, 'count') return { count: countRef } } } ``` 在模板中使用： ```html <template> <div> <p>Count: {{ count }}</p> </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端成长营

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

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

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

打赏作者

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

抵扣说明：

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

余额充值