vue3中toRef创建一个ref对象

· 为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的

· 区别ref: 拷贝了一份新的数据值单独操作, 更新时相互不影响

· 应用: 当要将 某个prop 的 ref 传递给复合函数时,toRef 很有用

父组件代码:

<template><div style="font-size: 14px;"><p>{{state}}</p><p>{{fooRef}}</p><p>{{foo}}</p><button @click="foo += '==='">父组件更新</button><Child :foo="foo"/></div>
</template><script lang="ts">
/*
toRef:为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的区别ref: 拷贝了一份新的数据值单独操作, 更新时相互不影响应用: 当要将 某个prop 的 ref 传递给复合函数时,toRef 很有用
*/
import {defineComponent,reactive,toRef,ref,
} from 'vue'
import Child from './child.vue'
// vue3.0 版本语法
export default defineComponent({components: {Child},setup () {const state = reactive({foo: 1,bar: 2})// fooRef的value与state中的foo是关联的const fooRef = toRef(state, 'foo')setTimeout(() => {// 改变了state.foo的值fooRef.value++console.log('state.foo:',state.foo) // 2// 改变了fooRef.value的值state.foo++console.log('fooRef.value:',fooRef.value) // 3}, 2000)const foo = ref('xxx')return {state,fooRef,foo}}
})
</script>

子组件代码:

<template><h3>子组件:</h3><h3>foo:{{foo}}</h3><h3>fooRef:{{fooRef}}</h3><h3>length:{{length}}</h3><button @click="update">更新</button>
</template><script lang="ts">
import {computed,defineComponent,Ref,toRef
} from 'vue'
// vue3.0 版本语法
export default defineComponent({name: 'Child',props: {foo: {type: String,required: true}},mounted () {console.log('this',this, this.foo)},setup (props) {function useFoo(fooRef: Ref) {const length = computed(() => {return fooRef.value.length})return {length}}console.log('props>', props)const fooRef = toRef(props, 'foo')console.log('fooRef', fooRef)const update = () => {// 无法为“foo”赋值,因为它是只读属性props.foo += '----' // [Vue warn] Set operation on key "foo" failed: target is readonly. }const {length} = useFoo(toRef(props, 'foo'))return {fooRef,update,length}}
})
</script>

初始页面效果:

3秒后页面效果:

点击父组件更新按钮:

点击更新按钮:

无法为“foo”赋值,因为它是只读属性

props.foo += '----'

[Vue warn] Set operation on key "foo" failed: target is readonly.

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/206369.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第十五届蓝桥杯(Web 应用开发)模拟赛 2 期-大学组(详细分析解答)

目录 1.相不相等 1.1 题目要求 1.2 题目分析 1.3 源代码 2.三行情书 2.1 题目要求 2.2 题目分析 2.3 源代码 3.电影院在线订票 3.1 题目要求 3.2 题目分析 3.3 源代码 4.老虎坤&#xff08;不然违规发不出来&#xff09; 4.1 题目要求 4.2 题目分析 4.3 源代码 …

Go语言网络爬虫工程经验分享:pholcus库演示抓取头条新闻的实例

网络爬虫是一种自动从互联网上获取数据的程序&#xff0c;它可以用于各种目的&#xff0c;如数据分析、信息检索、竞争情报等。网络爬虫的实现方式有很多&#xff0c;不同的编程语言和框架都有各自的优势和特点。在本文中&#xff0c;我将介绍一种使用Go语言和pholcus库的网络爬…

excel单元格内换行按什么快捷键

如果我们使用excel软件的时候&#xff0c;因为一些日常的操作太过繁琐想要简化自己的操作步骤的话&#xff0c;其实是有很多快捷方式在其中的。那么对excel单元格内换行按什么快捷键这个问题&#xff0c;据小编所知我们可以在表格中使用Alt Enter来进行换行。详细内容就来看下…

奇异值分解SVD(Singular Value Decomposition)

原理 奇异值分解是让机器从大量数据集中提取出关键信息的重要手段。&#xff08;矩阵中的泰勒公式&#xff0c;哈哈&#xff09; 思考&#xff1a;如果就矩阵的本质是线性变换而言的话&#xff0c;那A矩阵分解后是不是相当与先进行旋转→放缩→旋转呢&#xff1f; 求解奇异值的…

E云管家微信群聊机器人开发

请求URL&#xff1a; http://域名地址/modifyGroupRemark 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是String登录实例标识chatRo…

linux获得帮助_如何查看命令的用法、作用

Linux获得帮助 多层次的帮助&#xff1a; whatis command --help man and info /usr/share/doc/ Red Hat documentation 、Ubuntu documentation 软件项目网站 其它网站 搜索 whatis 使用数据库来显示命令的简短描述。 [rootlocalhost ~]# whatis rm rm (1) …

腾讯云双11活动最后一天,错过再等一年!

腾讯云双11活动已经进入尾声&#xff0c;距离活动结束仅剩最后一天&#xff0c;记得抓住这次上云好时机&#xff0c;错过这次&#xff0c;就要等到下一年才能享受到这样的优惠力度了&#xff01; 活动地址&#xff1a; 点此直达腾讯云双11活动主会场 活动详情&#xff1a; 1…

Linux中tar命令的几个高级用法

在Linux世界中&#xff0c;Tar命令是一把解密归档世界的魔法工具。无论是打包、压缩还是解压&#xff0c;Tar命令都能胜任。本文将生动地介绍Tar命令的基本用法&#xff0c;并深入探讨五个常用选项&#xff0c;帮助读者在Linux系统中灵活运用这个强大的工具。 一、命令概述 Ta…

【开源】基于Vue和SpringBoot的数字化社区网格管理系统

项目编号&#xff1a; S 042 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S042&#xff0c;文末获取源码。} 项目编号&#xff1a;S042&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、开发背景四、系统展示五、核心源码5…

在Pycharm中创建项目新环境,安装Pytorch

在python项目中&#xff0c;很多项目使用的各类包的版本是不一致的。所以我们可以对每个项目有专属于它的环境。所以这个文章就是教你如何创建新环境。 一、创建新环境 首先我们需要去官网下载conda。然后在Pycharm下面添加conda的可执行文件。 用conda创建新环境。 二、…

Unity之NetCode多人网络游戏联机对战教程(10)--玩家动画同步

文章目录 前言NetworkAnimation服务端权威客户端权威 前言 这次的动画同步与位置同步&#xff0c;可以说实现思路是一样的&#xff0c;代码相似度也非常高 NetworkAnimation 如果直接挂载这个脚本只有Host&#xff08;服务端&#xff09;才可以同步&#xff0c;Client是没有…

显示器校准软件BetterDisplay Pro mac中文版介绍

BetterDisplay Pro mac是一款显示器校准软件&#xff0c;可以帮助用户调整显示器的颜色和亮度&#xff0c;以获得更加真实、清晰和舒适的视觉体验。 BetterDisplay Pro mac软件特点 - 显示器校准&#xff1a;可以根据不同的需求和环境条件调整显示器的颜色、亮度和对比度等参数…

【Web】攻防世界 难度3 刷题记录(1)

目录 ①lottery ②ics-05 ③mfw ④simple_js ⑤fakebook 感觉自己对一些综合题的熟练度不太够&#xff0c;专项训练一下 ①lottery 抽奖赚钱&#xff0c;钱够9990000可买flag 随便输一串数字抓包&#xff0c;然后查看到一个post请求&#xff0c;api.php,题目里面有附件…

什么是AI PC:人工智能电脑?

大家好啊&#xff0c;我是董董灿。 今天在一个群聊里&#xff0c;聊到了关于 AI PC (人工智能电脑)的话题。 之前看到过关于 AI PC 的新闻&#xff0c;说的是联想集团董事长兼CEO杨元庆在一次演讲中提到了 AI PC 的概念&#xff0c;并且绘声绘色的描绘了AI PC 的发展前景。 下…

Gartner发布2024 年十大战略技术趋势

Gartner发布2024 年十大战略技术趋势 1. AI信任、风险和安全管理&#xff08;AI Trust, Risk and Security Management&#xff09;2.持续威胁暴露管理&#xff08;Continuous Threat Exposure Management&#xff09;3.可持续技术&#xff08;Sustainable Technology&#xff…

Golang开发之------ Beego框架

1.安装go&#xff08;配置环境变量&#xff09; 2.安装gorm&#xff08;Goland编辑器举例&#xff09;&#xff1a; go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct 3.初始化项目&#xff08;首先需要在工作目录新建bin文件夹&#xff0c;pkg文件…

线性回归 调试方法

调试方法 特征缩放 对于某些不具有比较性的样本特征 x i x_i xi​ &#xff08;比如对其他的x来说 x i x_i xi​ 相当大或者相当小&#xff09;&#xff0c;梯度下降的过程可能会非常漫长&#xff0c;并且可能来回波动才能最后收敛到全局的最小值。 在这样的情况下&#xff…

【数据中台】开源项目(2)-Dbus系统架构

大体来说&#xff0c;Dbus支持两类数据源&#xff1a; RDBMS数据源 日志类数据源 1 RMDBMS类数据源的实现 以mysql为例子. 分为三个部分&#xff1a; 日志抽取模块(最新版DBus已经废弃该模块&#xff0c;使用canal直接输出到kafka) 增量转换模块 全量拉取模块 1.1 日志抽…

RabbitMQ之延迟消息实战

RabbitMQ之延迟消息实战 使用死信交换机实现延迟消息 使用死信交换机的过期时间以及没有消费者进行消费&#xff0c;时间到了就会到死信队列中&#xff0c;由此可以实现延迟消息使用延迟消息插件 前提&#xff1a;需要mq配置插件 延时信息案例实战 把一个30分钟的延迟消息可以…

【模电】基本共射放大电路的组成及各元件的作用

基本共射放大电路的组成及各元件的作用 下图所示为基本共射放大电路&#xff0c;晶体管是起放大作用的核心元件。输入信号 U ˙ i \.{U}\tiny i U˙i为正弦波电压。 当 u i 0 {u\tiny i}0 ui0时&#xff0c;称放大电路处于静态。在输入回路中&#xff0c;基极电源 V B B V\tin…