vue3中的ref、isRef、shallowRef、triggerRef和customRef

1.ref

接受一个参数值并返回一个响应式且可改变的 ref 对象。 ref 对象拥有一个指向内部值的单一属性 .value property ,指向内部值。

例:此时,页面上的 str1 也跟着变化

<template><div><button @click="handleClick">点击</button></div><br /><div>str1:{{ str1 }}</div><br />
</template><script setup lang="ts">
import { ref } from 'vue'const str1 = ref('123')const handleClick = () => {str1.value = '456'console.log(str1.value) // "456"
}
</script>

使用 ref 获取 dom 元素:

<template><div ref="divRef"><button @click="handleClick">点击</button></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'const divRef = ref(null) // 注意:此处的变量名必须和标签上的属性名一致
onMounted(() => {console.log(divRef.value) // 输出 <div></div>
})
const handleClick = () => {}
</script>

 结果:

2.isRef

检查一个对象是否为 ref 包装过的对象。

<template><div><button @click="handleClick">点击</button></div><br /><div>str1:{{ str1 }}</div><br />
</template><script setup lang="ts">
import { ref, isRef } from 'vue'const str1 = ref('123')const handleClick = () => {str1.value = '456'console.log(str1.value) // "456"console.log(isRef(str1)) // true
}
</script>

3.shallowRef

创建一个跟踪自身 .value 变化的 ref ,但不会使其值也变成响应式的。

<template><div><button @click="handleClick">点击</button></div><br /><div>str1:{{ str1 }}</div><br /><div>str2:{{ str2 }}</div><br /><div>str3:{{ obj.name }}</div>
</template><script setup lang="ts">
import { ref, isRef, shallowRef } from 'vue'const str1 = ref('123')
const str2 = shallowRef('123')
const obj = shallowRef({ name: '张三' })const handleClick = () => {obj.value.name = '李四'console.log(obj.value) // {name: '李四'}// str2.value = '456'
}
</script>

运行结果:

页面展示:

需要注意的是:应用 shallowRef 定义的基本值类型的数据,是具有响应式效果的,而引用类型不具有响应式效果。在 Vue3 shallowRef 函数源码中, value 具有响应式,而 value 中的属性不具有响应式。与 ref 函数不同的是, shallowRef 函数不会将其值转化为响应式对象,而是直接将其作为普通的对象或数组来处理。这意味着,当修改 shallowRef 对象的属性或数组的元素时,   Vue3 将不会追踪这些变化。 

注:由于 ref triggerRef 在使用时都会调用 triggerRefValue ,而 triggerRefValue 会调用 triggerEffects 更新依赖,所以直接将 shallowRef 的依赖一起更新了。因此使用 shallowRef 定义的数据不应与使用 ref 定义的数据一起使用;应用 shallowRef 定义为 值类型的常量 被修改时与定义为 引用类型的常量 也不应一起使用!!!

<template><div><button @click="handleClick">点击</button></div><br /><div>str1:{{ str1 }}</div><br /><div>str2:{{ str2 }}</div><br /><div>str3:{{ obj.name }}</div>
</template><script setup lang="ts">
import { ref, shallowRef, triggerRef, customRef, onMounted } from 'vue'
const str1 = ref('123')
const str2 = shallowRef('123')
const obj = shallowRef({ name: '张三' })const handleClick = () => {obj.value.name = '李四'console.log(obj.value)str2.value = '456'
}
</script>

点击后结果:

点击事件部分代码改为:

const handleClick = () => {str1.value = '456'console.log(str1.value)obj.value.name = '李四'console.log(obj.value)
}

点击后结果:

4.triggerRef

强制更新页面 dom ,使其具有响应式。

<template><div ><button @click="handleClick">点击</button></div><div>str3:{{ obj.name }}</div>
</template><script setup lang="ts">
import { ref, shallowRef, triggerRef } from 'vue'
const obj = shallowRef({ name: '张三' })const handleClick = () => {obj.value.name = '李四'triggerRef(obj)console.log(obj.value)
}
</script>

点击后结果:

5.customRef

Vue3 中,提供了一个 customRef 函数,用于创建一个自定义的、可响应的引用对象。与 ref shallowRef 不同的是, customRef 可以自定义 get set 方法的实现逻辑,从而实现更加灵活的响应式行为。

使用 customRef 函数创建的引用对象与 ref 对象类似,也具有 value 属性,当读取这个属性时,会触发 get 方法的执行;当修改这个属性时,会触发 set 方法的执行,并且会触发相应的依赖更新。与 ref 对象不同的是, customRef 函数本身并不会对传入的初始值进行处理,而是将其直接作为 get 方法的返回值,需要自己手动处理。

<template><div><button @click="handleClick">点击</button></div><div>name:{{ name }}</div>
</template><script setup lang="ts">
import { customRef} from 'vue'function myRef<T = any>(value: T) {let timer: anyreturn customRef((track, trigger) => {return {get() {track()return value},set(newVal) {clearTimeout(timer)timer = setTimeout(() => {console.log('触发了set')value = newValtrigger()}, 500)}}})
}const name = myRef<string>('张三')const handleClick = () => {name.value = '李四'
}
</script>

 点击500ms后结果:

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

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

相关文章

如何在 windows 下运行 linux 程序

安装WSL和相关的Linux发行版可以按照以下步骤进行&#xff1a; 启用WSL功能&#xff1a; 打开“控制面板” -> “程序” -> “程序和功能” -> “启用或关闭Windows功能”。在弹出的窗口中&#xff0c;勾选“适用于Linux的Windows子系统”&#xff0c;然后点击“确定”…

严厉打击侵犯知识产权行为!法院公开审理假冒半岛超声炮知产刑事案件

随着医美行业的蓬勃发展&#xff0c;一些不法分子利用消费者对变美的渴望&#xff0c;制售假冒半岛超声炮&#xff0c;严重侵犯了消费者的合法权益&#xff0c;也破坏了医美市场的健康发展。为了维护市场秩序&#xff0c;保障消费者权益&#xff0c;各地相关监管部门持续加大监…

QT从入门到实战x篇_22_番外1_Qt事件系统

文章目录 1. Qt事件系统简介1.1 事件的来源和传递1.2 事件循环和事件分发1.2.1 QT消息/事件循环机制1.2.1.1 机制解释1.2.1.2 两个问题 1.2.2 事件分发 2. 事件过滤基础2.1 什么是事件过滤器&#xff08;Event Filter&#xff09;&#xff1f;2.2 如何安装事件过滤器 3. 事件过…

<计算机网络自顶向下> 路由器组成

路由器结构概况 路由&#xff1a;运行路由选择算法/协议&#xff08;RIP, OSPF, BGP&#xff09;生成路由表转发&#xff1a;从输入到输出链路交换数据包-根据路由表进行分组的转发中间的fabric是用来接收输入的分组交给输出端口的&#xff0c;完成局部的转发&#xff08;根据…

在广东珠海,持有软考等证书最高可获6位数补贴,快来申报!

近日&#xff0c;横琴粤澳深度合作区执行委员会印发《横琴粤澳深度合作区支持人才发展若干措施》&#xff08;以下简称《若干措施》&#xff09;及三项配套实施办法&#xff0c;鼓励企业“招贤纳士”&#xff0c;加强琴澳人才协同培养。目前&#xff0c;2024年第一批博士后专项…

Java23种设计模式-结构型模式之组合模式

组合模式&#xff08;Composite Pattern&#xff09;&#xff1a;将对象组合成树状结构以表示“部分-整体”层次结构&#xff0c;同时保持对单个对象和组合对象的一致性操作&#xff0c;主要目的是简化客户端代码&#xff0c;因为它可以统一处理单个对象和组合对象。 通常包含…

星汉未来AI应用市场:一站式AI解决方案平台

星汉未来AI应用市场&#xff1a;一站式AI解决方案平台 在人工智能技术日益渗透到各行各业的今天&#xff0c;星汉未来AI应用市场为我们提供了一个集创新与实用于一体的平台。下面&#xff0c;我将为您详细介绍这个平台的各个方面。 平台特色 星汉未来AI应用市场是一个面向未…

Keil出现警告:warning: #223-D: function “XXX“ declared implicitly

这个警告表明编译器在函数使用之前没有找到函数的显式声明或定义。这通常发生在函数被使用之前没有在当前文件中进行声明或定义&#xff0c;或者头文件未正确包含。 解决方式&#xff1a; 在当前文件中添加函数声明&#xff1a;在使用函数之前&#xff0c;在当前文件中添加函…

华为OD机试真题-反射计数-2023年OD统一考试(C卷D卷)

题目描述: 给定一个包含 0 和 1 的二维矩阵 给定一个初始位置和速度 一个物体从给定的初始位置触发, 在给定的速度下进行移动, 遇到矩阵的边缘则发生镜面反射 无论物体经过 0 还是 1, 都不影响其速度 请计算并给出经过 t 时间单位后, 物体经过 1 点的次数 矩阵以左上角位置为[…

maixcam如何无脑运行运行别人的模型(以安全帽模型为例)

maixcam如何无脑运行运行别人的模型&#xff08;以安全帽模型为例&#xff09; 本文章主要讲如何部署上传的模型文件&#xff0c;以及如果你要把你模型按照该流程应该怎么修改&#xff0c;你可以通过该文章得到你想要的应该&#xff0c;该应用也包含的退出按钮&#xff0c;是屏…

低空经济和无人机

低空经济和无人机是当前科技领域中的两个热门话题&#xff0c;它们的发展互为促进&#xff0c;共同推动着低空经济持续发热&#xff0c;投资主线也愈发清晰。 低空经济是指以低空空域为活动场所&#xff0c;以各类低空飞行器为运载工具&#xff0c;所衍生的各类经济形态、经济…

书生·浦语大模型-第七节课笔记/作业

笔记 还没看到视频 但评测对于模型优化是非常重要的&#xff0c;指引了模型选择与优化的方向 评测过程 大海捞针&#xff1a; 通过将关键信息随机插入一段长文本的不同位置&#xff0c;形成大语言模型 (LLM) 的Prompt&#xff0c;通过测试大模型是否能从长文本中提取出关键…

协议的定制之序列化与反序列化 | 守护进程

目录 一、再谈协议 二、序列化与反序列化 三、网络计算器的简单实现 四、网络计算器完整代码 五、代码改进 六、守护进程 七、Json序列化与反序列化 八、netstat 一、再谈协议 是对数据格式和计算机之间交换数据时必须遵守的规则的正式描述。简单的说了&#xff0c;网络…

FFmpeg常用实例详解

FFmpeg 是一个专业的多媒体框架&#xff0c;能够解码、编码、转码、复用、解复用、流式传输、过滤和播放几乎所有格式的媒体文件。 这里通过一些示例简单地介绍下 ffmpeg 命令的基本使用。 一、获取详细信息 ffmpeg -i <inputfile> -hide_banner 其中 -hide_banner 选项…

佛山南海区桂城珠宝玉石电商协会举办2023年度电商企业颁奖典礼

4月24日&#xff0c;佛山市南海区桂城珠宝玉石电商协会隆重举办第一届三次会员大会暨2023年度电商企业颁奖典礼&#xff0c;广邀各级政府领导、行业组织、珠宝商场、电商企业、珠宝直播达人以及新闻媒体嘉宾&#xff0c;共见璀璨&#xff0c;共话新发展、新机遇。这是平洲玉器珠…

Java-GUI-AWT-组件-TextComponent类

1 需求 2 接口 java.lang.Object java.awt.Component java.awt.TextComponent Method Detail public void setText(String t)public String getText()public String getSelectedText()public boolean isEditable()public void setEditable(boole…

docker 启动时报错

docker 启动时报如下错误 Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details 因为安装docker时添加了镜像源 解决方案&#xff1a; mv /etc/…

汉译英早操练-(十八)

hello大家好&#xff0c;文接上回&#xff1a;https://blog.csdn.net/weixin_41953346/article/details/138184776 继续学习政府工作报告。 财政政策加力提 效&#xff0c;加强重点领域支出保障&#xff0c;全年新增税费优惠超过2.2万亿元&#xff0c;增发 1 万亿元国债支持灾 …

pwn--realloc [CISCN 2019东南]PWN5

首先学习一下realloc这个函数&#xff0c;以下是文心一言的解释&#xff1a; realloc是C语言库函数之一&#xff0c;用于重新分配内存空间。它的主要功能是调整一块内存空间的大小。当需要增加内存空间时&#xff0c;realloc会分配一个新的更大的内存块&#xff0c;然后将原内…

冯唐成事心法笔记 —— 知世

系列文章目录 冯唐成事心法笔记 —— 知己 冯唐成事心法笔记 —— 知人 冯唐成事心法笔记 —— 知世 冯唐成事心法笔记 —— 知智慧 文章目录 系列文章目录PART 3 知世 成事者的自我修养怎样做一个讨人喜欢的人第一&#xff0c;诚心第二&#xff0c;虚心 如何正确看待别人的评…