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: any
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          console.log('触发了set')
          value = newVal
          trigger()
        }, 500)
      }
    }
  })
}

const name = myRef<string>('张三')

const handleClick = () => {
  name.value = '李四'
}
</script>

 点击500ms后结果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

BUUCTF-MISC-10.LSB1

10.LSB1 题目&#xff1a;lsb隐写&#xff0c;stegsolve可以看到包含了一个PNG图片 使用stegsolve打开这个图片 由PNG文件头可以看出隐写内容为PNG文件&#xff0c;按save Bin键保存为PNG文件。 得到一张二维码图片&#xff0c;使用CQR扫一下

盲返模式:电商领域的新玩法与商业创新

大家好&#xff0c;我是微三云周丽&#xff0c;今天给大家分析当下市场比较火爆的商业模式&#xff01; 小编今天跟大伙们分享什么是什么是盲返模式&#xff1f; 随着互联网的深入发展&#xff0c;电商行业正面临着前所未有的机遇与挑战。在这个竞争激烈的市场环境中&#xff…

GAN 生成对抗神经网络

GAN 文章目录 GANGAN的结构GAN的目标函数GAN的训练GAN的优势和不足优势不足 GAN的结构 GAN的设计灵感来源于博弈论中的零和博弈&#xff08;Zero-sum Game&#xff09;&#xff0c;在零和博弈中&#xff0c;参与双方的收益是完全相反的&#xff0c;一方的收益必然导致另一 方的…

Python400集 视频教程,手把手带你零基础手写神经网络!!

嗨喽&#xff0c;大家好&#xff0c;今天又要给大家整一波福利了&#xff01; 学习编程&#xff0c;最忌讳就是今天一个教程&#xff0c;明天一个教程&#xff0c;频繁更换教程&#xff0c;增加自己的学习成本&#xff0c;对于新手小白会是一件严重打击自信心的事情。所以今天…

jetson开发板+外接散热风扇

本文参考链接 https://news.mydrivers.com/1/580/580811.htm?refhttps%3A//www.baidu.com/link%3Furl%3DM_D45a-od3NK-ER_Flgqqw4LjHLinB1xrmYNj7VVqHlM2zVXwR9Z7FGilCYDRRJYNpIsdejeAfpVtmVTowuFfK%26wd%3D%26eqid%3D81e7865e000256a5000000046628ff4a 一、三种风扇的种类 二…

全自动装箱机多少钱?它的性能和优势又是怎样的呢?

在现代化的生产线中&#xff0c;全自动装箱机已经成为许多企业提升效率、降低成本的重要设备。那么&#xff0c;全自动装箱机到底多少钱?它的性能和优势又是怎样的呢? 一、全自动装箱机&#xff1a;高效省力的生产助手 全自动装箱机是一种高度自动化的包装设备&#xff0c;能…

掌握未来通信技术:5G核心网基础入门

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;5GC笔记仓 朋友们大家好&#xff0c;本篇文章是我们新内容的开始&#xff0c;我们本篇进入5GC的学习&#xff0c;希望大家多多支持&#xff01; 目录 一.核心网的演进2G核心网2.5G核心网3G核心网4G…

CFCASSL证书的网络安全解决方案

在数字化时代&#xff0c;网络信息安全的重要性不言而喻。随着电子商务、在线交易、远程办公等互联网活动的日益普及&#xff0c;确保数据传输的安全性与隐私保护成为企业和用户共同关注的焦点。在此背景下&#xff0c;CFCA SSL证书作为一种权威、高效的网络安全解决方案&#…

ShardingSphere 5.x 系列【24】集成 Nacos 配置中心

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 前言2. ShardingSphereDriverURLProvider3. 方式一:基于 Nacos Java SDK…

《2024年网络弹性风险指数报告》:92%的组织并未准备好应对AI安全挑战

网络弹性是一个比传统网络安全更大、更重要的范例&#xff0c;拥有有效网络弹性能力的组织能在承受网络攻击、技术故障或故意篡改企图后迅速恢复正常业务运营。近日&#xff0c;Absolute security公司发布的《2024年网络弹性风险指数报告》旨在评估当今全球企业的网络弹性状况&…

【Elasticsearch<一>✈️✈️】简单安装使用以及各种踩坑

目录 &#x1f378;前言 &#x1f37b;一、软件安装&#xff08;Windows版&#xff09; 1.1、Elasticsearch 下载 2.1 安装浏览器插件 3.1、安装可视化工具 Kibana 4.1、集成 IK 分词器 &#x1f37a;二、安装问题 &#x1f379;三、测试 IK 分词器 ​&#x1f377; 四、章…

用斐波那契数列感受算法的神奇(21亿耗时0.02毫秒)

目录 一、回顾斐波那契数列 二、简单递归方法 &#xff08;一&#xff09;解决思路 &#xff08;二&#xff09;代码展示 &#xff08;三&#xff09;性能分析 三、采用递归HashMap缓存 &#xff08;一&#xff09;解决思路 &#xff08;二&#xff09;代码展示 &…

PPSSPPSDL for Mac v1.17.1 PSP游戏模拟器(附500款游戏) 激活版

PPSSPPSDL for Mac是一款模拟器软件&#xff0c;它允许用户在Mac上运行PSP&#xff08;PlayStation Portable&#xff09;游戏。通过这款模拟器&#xff0c;用户可以体验到高清甚至更高的分辨率的游戏画面&#xff0c;同时还能够升级纹理以提升清晰度&#xff0c;并启用后处理着…

新恒盛110kV变电站智能辅助系统综合监控平台+道巡检机器人

江苏晋控装备新恒盛化工有限公司是晋能控股装备制造集团有限公司绝对控股的化工企业&#xff0c;公司位于江苏省新沂市。新恒盛公司40•60搬迁项目在江苏省新沂市经济开发区化工产业集聚区苏化片区建设&#xff0c;总投资为56.64亿元&#xff0c;该项目是晋能控股装备制造集团重…

PEG SPARCL™试剂盒

Life Diagnostics开发了SPARCL™ 试剂盒用于检测甲氧基-PEG&#xff08;mPEG&#xff09;和非甲氧基PEG。可检测游离的PEG和PEG化的蛋白质。灵敏度随PEG链长度和PEG化程度的不同而变化。 SPARCL™检测具有以下特点&#xff1a; ● 发光免疫测定法 ● 只需一次30分钟的孵育 …

快递物流订阅推送API接口如何对接

快递物流订阅推送API接口指的是订阅国内物流快递信息&#xff0c;当运单状态发生变化时&#xff0c;会推送到您的回调地址&#xff0c;直到这些运单号生命周期结束。简单点说就是先订阅快递单号再推送物流信息。那么快递物流订阅推送API接口该如何对接呢&#xff1f; 首先我们…

如何通过香港站群服务器提升跨境电商交易效率?

如何通过香港站群服务器提升跨境电商交易效率? 在全球电子商务迅速发展的今天&#xff0c;跨境电商已成为企业拓展国际市场、获取更多商机的重要途径。然而&#xff0c;跨境电商面临的挑战也不容小觑&#xff0c;尤其是在交易效率方面。利用香港站群服务器&#xff0c;不仅可…

ABAP Visual Code 新建sap系统连接

本文主要介绍如何新建SAP前端系统链接 前提是你已经都扩展完了 1.点击SAP fiori--》点击新建 2.选择 abap on premise 3.输入如下信息 4.这里介绍下URL 如何获取 SMICM-->点击service 明细里面可以看到你的host name 和 port 当然你也可以随便找一个你的odata 服务看下ur…

easypoi 导出增加自增序列

要求&#xff1a;使用easypoi导出Excel的时候&#xff0c;要求增加”序号“列&#xff0c;从1开始增加。这列与业务数据无关&#xff0c;只是展示用&#xff0c;便于定位。如下图所示 实现方式&#xff1a;Java对象新增一列&#xff0c;注意name "序号", format &…

【注解和反射】通过反射动态创建对象、调用普通方法、操作属性

继上一篇博客【注解和反射】获取类运行时结构-CSDN博客 目录 八、通过反射动态创建对象 测试&#xff1a;通过反射动态创建对象 思考&#xff1a;难道没有无参的构造器就不能创建对象了吗?只要在操作的时候明确的调用类中的构造器并将参数传递进去之后&#xff0c;才可以实…