学习vue3第四节(ref以及ref相关api)

主要记录以下api:ref()、isRef()、unref()、 shallowRef()、triggerRef()、customRef()

1、ref() 定义

接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value,.value属性用于追踪并且存储响应式数据的值(包括对象),当响应式对象变化时会自动追踪更新视图;
如果将一个对象类型赋值给 ref(),那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref,它们将被深层地解包
如图:
在这里插入图片描述

2、ref使用

ref() 接收的数据,在js中使用需要.value作为唯一的键引用,而在模板中使用只需要直接使用即可,不需要再.value,因vue模板会自动解析ref类型数据;
如图:

<template>年龄:{{ age }}<br>姓名:{{ name }}
</template>
<script setup>import { ref,  reactive, computed, onMounted, onActivated, unref } from 'vue'const age = ref(0)const name = ref('Andy')onMounted(() => {console.log('==age==', age.value)console.log('==name==', name.value)})
</script>

3、ref() 接收对象类型时

ref() 接收的对象类型若要里面的属性保持响应式,需要使用.value的方式进行单个属性赋值,如果将声明对象整体赋值,则会导致响应式失效,如:unNormalMan

unNormalMan{{ JSON.stringify(unNormalMan) }}<br><button @click="handleChangeNormal">unNormalMan</button>// 声明为响应式对象
let unNormalMan = ref({job: '不知道',love: '猜猜'
})
// 整体赋值后变成普通对象,视图不会更新
const handleChangeNormal = () => {unNormalMan = {a: '111',b: '222'}console.log('=handleChangeNormal==unNomalMan', unNormalMan)console.log('=change=unRef', unref(unNormalMan))
}

在这里插入图片描述

// .value 形式单个赋值可以保持响应式
const person = ref({job: '搬砖',love: '象棋'
})const handleChangeJOb = () => {person.value.job = person.value.job + '$'const { job } = person.valueconsole.log('===job=', job) // 搬砖$ 同样页面视图也会更新
}

在这里插入图片描述

4、ref() 优缺点

响应式数据:ref函数可以让我们轻松地创建响应式数据,无需使用Vue2中的data选项或this关键字。
支持所有类型:与Vue2的data选项不同,ref函数可以用于创建任何类型的响应式数据,包括对象和数组。
逻辑复用灵活:通过使用ref函数,我们可以更容易地在不同的组件和逻辑块之间共享和复用状态。
注意:
使用 ref 函数创建的响应式数据,在修改值时,必须通过 .value 属性来访问和修改。
ref 函数返回的响应式引用对象是不可变的,即你不能将新的值赋给整个引用对象,而只能通过 .value 属性来修改内部的值。
ref 函数可以用于创建任何类型的响应式数据,包括基本类型、对象、数组等。

5、ref其他属性 isRef unRef shallowRef triggerRef customRef ,toRef toRefs 下节结合reactive 介绍

5.1、isRef() 判断一个对象或者值是否为ref类型,返回一个布尔值

const personMen = ref('优秀的')
console.log(isRef(personMen)) // true
const norefObj = {a:'333'}
console.log(isRef(norefObj)) // false

5.2、unref() 传入的对象如果是ref() 值或对象,则会返回 person.vue d的代理对象proxy;相反,如果是普通的对象或值,则会原样返回
如图:

let unNormalMan = ref({job: '不知道',love: '猜猜'
})
console.log('=000=unRef', unref(unNormalMan))
// Proxy:{...}const per = '测试'
console.log(unref(per)) // 测试

5.3、shallowRef()
浅层的响应式声明,只针对.value进行响应式,而不会进行深层次的递归,即.value.xxx 不是响应式的,主要针对的是复杂类型的数据结构,
如:

const pet = shallowRef({job: '专业搬砖'
})pet.value = { job: '躺平梦想'} // 会触发视图更新,响应式的
pet.value.job = '响应不了' // 不是响应式的,

5.4、triggerRef
强制触发依赖于浅层的Ref副作用,triggerRef() 会使浅层的响应式突变为深层的响应式,强制更新视图,比如使用shallowRef 处理的对象,响应式只能是浅层的,如果想要值更改时候也发生变化,则需要如下

const perObj = shallowRef({job: '测试'
})const handleChangePerObj = () => {perObj.value.job = '搬砖的'triggerRef(perObj) // 这样在模板中使用的 {{ perObj.job }} 会更新为 “搬砖的”,如果不使用 triggerRef() 则不会更新视图
}

5.5、customRef
创建一个工厂函数,显示的声明对其依赖追踪触发的控制条件;
即:创建的工厂函数中返回 set() get() 方法对象,通过set()自主控制触发时机,比如防抖
防抖代码:

import { customRef } from 'vue'export function useDebouncedRef(value, delay = 500) {let timeoutreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger()}, delay)}}})
}
// 使用如下:
<script setup>
import { useDebouncedRef } from './debouncedRef'
const myRefVal = useDebouncedRef('测试防抖')
</script><template><input v-model="myRefVal" />
</template>

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

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

相关文章

vscode使用npm命令无反应,而终端可以的解决办法

如若你遇到这种情况 使用命令 get-command npm 去下面这个路径把它删掉就可以了

在linux中如何后台运行java项目(详细)

目录 1.查看是否安装有jdk环境 2.将打包好的jar上传到linux服务器上 3.运行java程序 直接运行&#xff1a; 使用 & 使用 nohup & 扩展知识 1.查看是否安装有jdk环境 java -version 如果可以查看到jdk版本 &#xff0c;那就代表环境配置好了 2.将打包好的jar上…

Java JUC 笔记(2)

Java JUC 笔记&#xff08;2&#xff09; 锁框架 JDK5以后增加了Lock接口用来实现锁功能&#xff0c;其提供了与synchronized类似的同步功能&#xff0c;但是在使用时手动的获取和释放锁 Lock和Condition锁 这里的锁与synchronized锁不太一样&#xff0c;我们可以认为是Loc…

【YOLOv9】训练模型权重 YOLOv9.pt 重新参数化轻量转为 YOLOv9-converted.pt

【YOLOv9】训练模型权重 YOLOv9.pt 重新参数化轻量转为 YOLOv9-converted.pt 1. 模型权重准备2. 模型重新参数化2.1 文件准备2.2 参数修改2.3 重新参数化过程 3. 重新参数化后模型推理3.1 推理超参数配置3.2 模型推理及对比 4. onnx 模型导出&#xff08;补充内容&#xff09;4…

漏洞发现-漏扫项目篇NucleiYakitGobyAfrogXrayAwvs联动中转被动

知识点 1、综合类-Burp&Xray&Awvs&Goby 2、特征类-Afrog&Yakit&Nuclei 3、联动类-主动扫描&被动扫描&中转扫描 章节点&#xff1a; 漏洞发现-Web&框架组件&中间件&APP&小程序&系统 扫描项目-综合漏扫&特征漏扫&被动…

遥感云计算的一个拐点

GeoForge&#xff0c;一个值得关注的遥感大数据应用 简介 GeoForge是由Ageospatial公司开发的一个基于大语言模型(GeoLLMs)的地理空间分析平台。GeoForg的目的是使每个人都可以轻松进行地图绘制和地理空间分析&#xff0c;无论您是外行还是专家。 Geo for ChatGPT 作者团队已…

YOLOv9改进 添加新型卷积注意力框架SegNext_Attention

一、SegNext论文 论文地址:2209.08575.pdf (arxiv.org) 二、 SegNext_Attention注意力框架结构 在SegNext_Attention中,注意力机制被引入到编码器和解码器之间的连接中,帮助模型更好地利用全局上下文信息。具体而言,注意力机制通过学习像素级的注意力权重,使得模型可以对…

【C++庖丁解牛】vector容器的简易模拟实现(C++实现)(最后附源码)

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言vector容器代码实现内…

前端JavaScript篇之常见事件

目录 JavaScript常见事件click&#xff08;点击&#xff09;mouseover&#xff08;鼠标悬停&#xff09;keydown&#xff08;按键按下&#xff09;load&#xff08;加载&#xff09;submit&#xff08;提交&#xff09; JavaScript常见事件 JavaScript中的事件是指用户与网页元…

JVM垃圾收集器-serial.parNew,parallelScavnge,serialOld,parallelOld,CMS,G1

垃圾收集器 分代模型 适用于新生代&#xff1a; serial parNew parallel Scaavenge 适用于老年代&#xff1a; CMS serial Old(msc) paraller Old 分区模型 适用于超大容量&#xff1a; G1 分代模型 serial /serial Old收集器 1.单线程收集器 2.收集时会暂停其他线程&…

剑指offer C ++双栈实现队列

1. 基础 队列&#xff1a;先进先出&#xff0c;即插入数据在队尾进行&#xff0c;删除数据在队头进行&#xff1b; 栈&#xff1a;后进先出&#xff0c;即插入与删除数据均在栈顶进行。 2. 思路 两个栈实现一个队列的思想&#xff1a;用pushStack栈作为push数据的栈&#xff…

使用canvas绘制超炫时钟

HTML5 Canvas相当于一个画板&#xff0c;你可以在Canvas绘制任意的东西&#xff0c;今天要分享一款利用HTML5 Canvas绘制的超炫时钟的方法及代码&#xff0c;非常的漂亮&#xff0c;这里推荐给大家 代码地址 使用canvas绘制超炫时钟

react中JSX的详解

目录 JSX的本质及其与JavaScript的关系探究 一、JSX的本质 二、JSX与JavaScript的关系 三、为什么要使用JSX 四、不使用JSX的后果 五、JSX背后的功能模块 JSX的本质及其与JavaScript的关系探究 在React开发中&#xff0c;JSX是一个不可或缺的部分。那么&#xff0c;JSX的…

LeetCode102题:二叉树的层序遍历(python3)

代码思路&#xff1a;使用队列先进先出的特性&#xff0c;queue[]不为空进入for循环&#xff0c;tmp存储每层的节点&#xff0c;将结果添加至res[]中。 python中使用collections中的双端队列deque()&#xff0c;其popleft()方法可达到O(1)时间复杂度。 class Solution:def lev…

数据结构 第1章:绪论

文章目录 1. 绪论1.1. 数据结构 1.2. 算法1.2.1. 算法的基本概念1.2.2. 算法的时间复杂度1.2.3. 算法的空间复杂度 1. 绪论 程序 数据结构 算法 1.1. 数据结构 数据&#xff1a;是对客观事物的符号表示&#xff0c;在计算机科学中是指所有能输入到计算机中并被计算机程序处理…

【机器学习300问】33、决策树是如何进行特征选择的?

还记得我在【机器学习300问】的第28问里谈到的&#xff0c;看决策树的定义不就是if-else语句吗怎么被称为机器学习模型&#xff1f;其中最重要的两点就是决策树算法要能够自己回答下面两问题&#xff1a; 该选哪些特征 特征选择该选哪个阈值 阈值确定 今天这篇文章承接上文&…

探秘高校线上心理咨询室:Java+SpringBoot的实践

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

蓝桥·算法双周赛|第七场分级赛——小白入门赛

&#x1f525;博客介绍&#xff1a; 27dCnc &#x1f3a5;系列专栏&#xff1a; <<数据结构与算法>> << 算法入门>> << C项目>> &#x1f3a5; 当前专栏: << 算法入门>> 专题 : 数据结构帮助小白快速入门算法 &#x1f4…

C#四部曲(知识补充)

Unity跨平台原理 .Net相关 只要编写的时候遵循.NET的这些规则&#xff0c;就能在.NET平台下通用 各种源码→根据.NET规范编写→(虚拟机)生成CIL中间码(保存在程序集中)→转成操作系统原代码 跨语言← 跨平台↓ Unity跨平台原理&#xff08;Mono&#xff09; c#脚本→MonoC#编…

CCCorelib 点云曲面特征(CloudCompare内置算法库)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里基于每个点的邻域协方差来获取点云中具有的曲面几何特征的点,计算方式如下图所示: 二、实现代码 // CloudCompare #include <CCCoreLib/PointCloudTpl.h> #include <CCCoreLib/