当前位置: 首页 > news >正文

Vue学习记录之三(ref全家桶)

ref、reactive是在 setup() 声明组件内部状态用的, 这些变量通常都要 return 出去,除了供 < template > 或渲染函数渲染视图,也可以作为 props 或 emit 参数 在组件间传递。它们的值变更可触发页面渲染。

ref :是一个函数,用于创建一个响应式的引用,通俗的说就是把一个变量转变成响应式变量。定义基本类型数据(支持所有的类型).能指定基础类型和复杂类型. 也可以读取dom(详见实例1)

isRef: 是判断一个对象是否是Ref 类型。

Ref :是 TypeScript 中的类型,用于描述由 ref 创建的响应式对象的类型。
import type {Ref} from ‘vue’
const count: Ref = ref(0);

reacive:和ref功能相同,但是使用范围不同。只能指定基础类型(引用类型), 定义对象(或数组)类型(引用类型) Array,Object,Map,Set。 其次ref 取值或者修改值需要用到value, 而reactive则不需要。reacive 不能直接赋值,否则就会破坏其响应式, readonly可以将其属性转化为只读。其次shallowReactive也是浅层响应。 详见实例4

shallowRef : 用于浅层响应式的。ref 可以做深层次相应的。但是在同一个方法中,二者不可以同时使用,否则shallowRef 就会失去浅层相应。 二者的底层都是triggerRef,所有被强制执行了。

triggerRef: 强制更新页面DOM,一般情况下不直接使用。

customRef :顾名思义,就是可以自定义ref函数。接受一个工厂函数作为参数,这个工厂函数返回一个对象,该对象需要实现 get 和 set 方法。 一般情况下用不到,属于高级编程。 详见实例2

toRefs: 使从reactive定义的解构数据变成响应式的。用于将整个 reactive 对象中的每个属性转换为 ref,适合解构赋值的场景。

toRef:用于将 reactive 对象中的单个属性转换为 ref,适合只处理某个特定属性的场景。是对传入对象指定属性的响应式绑定,值改变不会更新视图。只能修改响应式对象的值,非响应式视图毫无变化。该函数需要两个参数,第一个是对象,第二个是对象的属性。

它们的主要区别在于作用的范围:toRefs 处理所有属性,而 toRef 仅处理单个属性

toRaw: 用于获取响应式对象的原始数据对象,不受响应式系统的影响。就是解除响应式。
左侧是: man对象,右侧是 toRaw(man)
在这里插入图片描述

我们可以自己编写一下toRefs的功能:

const man = reactive({name:'lvmanba', age:50, like: 'eat'})
const toRefs = <T extends object>(object:T) =>{const map:any = {}for(let key in object){map[key] = toRef(object,key)}return map
}const {name,age,like} = toRefs(man)

toRef、toRefs 用于处理 组件/函数 传递的响应式数据,如:在接收父组件 props 时 / 或 composables 组合式函数返回数据时建立起某些属性的响应式引用;
通过 ref 包装的属性在 setup 函数内都需要通过 .value 去访问它值 ( template 模版内不用 )。因此,ref、toRef 创建的变量值都需要用变量 .value 读取。reactive 则不用,因为会自动解包分配给它的 ref。
至于 toRefs,如果是解构赋值,如: const { state1, state2 } = toRefs(props),值需要这样获取:state1.value.count;
若整体赋给一个变量,如:const state = toRefs(props),则是 state.state1.value。
只有 toRefs 可以解构;

实例1

<template><div>{{Man}}</div><div>{{Man2}}</div><button @click="change">修改</button>
</template>
<script setup lang='ts'>
import { ref,reactive, shallowRef,triggerRef, customRef } from 'vue'
import type {Ref} from 'vue'
//const Man = {name: "lvmanba"}  //下面将无法修改
type M = {name: string
}
//可以使用两种方式,第一种(Ref)如果类型比较复杂,则推荐使用。一般使用第二种。
//第一种:
//const Man:Ref<M> = ref({name:"lvmanba"})
//第二种:
//const Man = ref<M>({name:"lvmanba"})   //ref<泛型类型>({对象})
//第三种:
const Man = ref({name:"lvmanba1"})   //让自己判断类型
const Man2 = shallowRef({name:"lvmanba2"})  //应该是浅层相应,只能到value。
const change = () =>{// ref 返回的是ES6的class类,通过它里面的属性value来获取值。 固定语法//Man.value.name = "lvmanba1-1"//Man2.value.name = "lvmanba2-1"//注意,如果同时在一个方法中修改ref和shallowRef两种类型,则shallowRef失效。 修改shallowRef类型的值有两种方法。//方法1:Man2.value.name = "lvmanba2-1"triggerRef(Man2)//方法2:/*Man2.value = {name:"我被修改了"}*/console.log(Man)
}
</script>
<style scoped></style>

实例2: 自定义ref

<template><div>{{Man}}</div><button @click="change">修改</button>
</template>
<script setup lang='ts'>
import { ref,reactive, shallowRef,triggerRef, customRef} from 'vue'
function MyRef<T>(value:T){//它是一个回调函数,要求返回一个对象,需要传递2个参数track,triggerreturn customRef((track,trigger)=>{return {get(){//用来收集依赖track()return value},set(newVal){//触发依赖value = newValtrigger()}}})
}
const Man = MyRef<string>("你好")
const change = () =>{Man.value = "不好"
}
</script>

上述可以实现防抖功能:函数改进如下

function MyRef<T>(value:T){//它是一个回调函数,要求返回一个对象,需要传递2个参数track,triggerreturn customRef((track,trigger)=>{let timer: anyreturn {get(){//用来收集依赖track()return value},set(newVal){//触发依赖clearTimeout(timer)timer = setTimeout(()=>{console.log("我被触发了")timer = nullvalue = newValtrigger()},500)}}})
}

实例3: ref 读取dom

<template><div>{{ name }}</div><div class="container" ref="doms"> 这个是内容的主题</div><button @click="changes">修改值</button>
</template>
<script setup lang='ts'>
import { ref,reactive, shallowRef,triggerRef, customRef} from 'vue'
const name = ref("lvmanba")
const doms = ref<HTMLDivElement>()
//console.log(doms.value?.innerHTML)  //这个阶段,html还没有被渲染,我们可以随便加入一个函数
const changes = () =>{name.value = "lvmanba2"console.log(doms.value?.innerHTML)
}
</script>

实例4 : reactive 实际应用

<template><form><input v-model="form.name" type="text"><br><input v-model="form.age" type="text"><br><button @click.prevent="submit">提交</button> <!--.prevent 阻止默认提交--></form><hr><button @click="add">添加数组</button><div><li v-for="item in list">{{ item }}</li></div></template>
<script setup lang='ts'>
import { ref,reactive, shallowRef,triggerRef, customRef} from 'vue'
//第一种 对象
const form = reactive({name: "张三",age: 20
})
const submit=()=>{console.log(form)
}
//第二种是 数组
let list = reactive<string[]>(['a','b','c'])
const add = () =>{//第一种方法,同步//list.push("ABC")//第二种方法,异步setTimeout(()=>{let res = ['ABC','EFG','HIG','KLM']//list = res   //reacive 不能直接赋值,否则就会破坏其响应式list.push(...res)  //... 是扩展运算符,用于将数组或其他可迭代对象展开成单个元素,并作为独立的参数传递给 push,最终将这些元素添加到 list 的末尾console.log(list)},2000)
}
//第三种方法,将数组转化为对象(添加一个对象,将数组作为属性), 然后就可以将 list_1.arr = res 赋值了。视图中也需要修改为list_1.arr
const list_1 = reactive<{arr:string[]}>({arr:[]})
</script>

Visual Studio Code小技巧, 输入vue3回车自动会出现下面的模版。
在这里插入图片描述
在这里插入图片描述
打开文件以后,输入下面内容。

{"Print to console": {"prefix": "vue3","body": ["<template>","    <div></div>","</template>","<script setup lang='ts'>","import { ref,reactive } from 'vue'","","</script>","<style scoped>","","</style>",],"description": "Log output to console"}
}

相关文章:

Vue学习记录之三(ref全家桶)

ref、reactive是在 setup() 声明组件内部状态用的&#xff0c; 这些变量通常都要 return 出去&#xff0c;除了供 < template > 或渲染函数渲染视图&#xff0c;也可以作为 props 或 emit 参数 在组件间传递。它们的值变更可触发页面渲染。 ref &#xff1a;是一个函数&…...

第二十六篇——九地篇:九种形势的应对之道

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 地势的维度重新阐述了懂得人心的重要性&#xff0c;道久其归一为为别人。…...

学习记录:js算法(三十七): 搜索二维矩阵

文章目录 搜索二维矩阵我的思路网上思路 总结 搜索二维矩阵 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; ● 每行中的整数从左到右按非严格递增顺序排列。 ● 每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&a…...

拥控算法BBR入门1

拥塞控制算法只与本地有关 一个TCP会话使用的拥塞控制算法只与本地有关。 两个TCP系统可以在TCP会话的两端使用不同的拥塞控制算法 Bottleneck Bandwidth and Round-trip time Bottleneck 瓶颈 BBR models the network to send as fast as the available bandwidth and is 2…...

[Python数据可视化]Plotly Express: 地图数据可视化的魅力

在数据分析和可视化的世界中&#xff0c;地图数据可视化是一个强大而直观的工具&#xff0c;它可以帮助我们更好地理解和解释地理数据。Python 的 Plotly Express 库提供了一个简单而强大的方式来创建各种地图。本文将通过一个简单的示例&#xff0c;展示如何使用 Plotly Expre…...

windows C++ 并行编程-PPL 中的取消操作(四)

并行模式库 (PPL) 中取消操作的角色、如何取消并行工作以及如何确定取消并行工作的时间。 运行时使用异常处理实现取消操作。 请勿在代码中捕捉或处理这些异常。 此外&#xff0c;还建议你在任务的函数体中编写异常安全的代码。 例如&#xff0c;可以使用获取资源即初始化 (RA…...

【数据结构】字符串与JSON字符串、JSON字符串及相应数据结构(如对象与数组)之间的相互转换

前言&#xff1a; 下面打印日志用的是FastJSON依赖库中的 Log4j2。依赖&#xff1a; <!-- Alibaba Fastjson --> <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.80</version> …...

LeetcodeTop100 刷题总结(一)

LeetCode 热题 100&#xff1a;https://leetcode.cn/studyplan/top-100-liked/ 文章目录 一、哈希1. 两数之和49. 字母异位词分组128. 最长连续序列 二、双指针283. 移动零11. 盛水最多的容器15. 三数之和42. 接雨水&#xff08;待完成&#xff09; 三、滑动窗口3. 无重复字符的…...

Next-ViT: 下一代视觉Transformer,用于现实工业场景中的高效部署

摘要 由于复杂的注意力机制和模型设计&#xff0c;大多数现有的视觉Transformer&#xff08;ViTs&#xff09;在实际的工业部署场景中&#xff0c;如TensorRT和CoreML&#xff0c;无法像卷积神经网络&#xff08;CNNs&#xff09;那样高效运行。这提出了一个明显的挑战&#x…...

C++知识点示例代码助记

C语言设计期末知识点附示例代码。 1. 基础语法 变量和数据类型&#xff1a; int a 10; // 整型 float b 5.25f; // 单精度浮点型 double c 5.25; // 双精度浮点型 char d A; // 字符型 bool e true; // 布尔型 const int PI 3.14; // 常量输入输出&…...

Java 入门指南:JVM(Java虚拟机)垃圾回收机制 —— 垃圾回收算法

文章目录 垃圾回收机制垃圾判断算法引用计数法可达性分析算法虚拟机栈中的引用&#xff08;方法的参数、局部变量等&#xff09;本地方法栈中 JNI 的引用类静态变量运行时常量池中的常量 垃圾收集算法Mark-Sweep&#xff08;标记-清除&#xff09;算法Copying&#xff08;标记-…...

苍穹外卖Day01-2

导入接口文档 yApi接口管理平台http://api.doc.jiyou-tech.com/ 创建项目 导入接口文件 导入结果界面 Swagger 介绍 使用Swagger你只需要按照它的规范去定义接口及接口相关的信息&#xff0c;就可以做到生成接口文档&#xff0c;以及在线接口调试页面。 官网&#xff1a;ht…...

软考中级软件设计师——数据结构与算法基础学习笔记

软考中级软件设计师——数据结构与算法基本概念 什么是数据数据元素、数据项数据结构逻辑结构物理结构&#xff08;存储结构&#xff09; 算法什么是算法五个特性算法效率的度量时间复杂度空间复杂度 什么是数据 数据是信息的载体&#xff0c;是描述客观事物属性的数、字符及所…...

虚幻引擎 | (类恐鬼症)玩家和NPC语音聊天(中)

虚幻引擎 | &#xff08;类恐鬼症&#xff09;玩家和NPC语音聊天-CSDN博客 上篇偏重实现步骤&#xff0c;中篇偏重理解校准和降低延迟&#xff0c;下篇加入上下文背景array和设置口音 TTS通用参数 ————————————————————————————————————…...

整流电路的有源逆变工作状态

目录 1. 逆变的概念 2. 有源逆变的条件 3. 电流电路的概念 4. 产生逆变的条件 5. 三相桥式全控整流电路的有源逆变工作状态 6. 逆变角的概念 7. 逆变失败的原因 8. 最小逆变角的限制 整流电路的有源逆变状态是指通过控制整流器&#xff0c;使其将直流电源的能量反向送回…...

Android 签名、空包签名 、jarsigner、apksigner

jarsigner是JDK提供的针对jar包签名的通用工具, 位于JDK/bin/jarsigner.exe apksigner是Google官方提供的针对Android apk签名及验证的专用工具, 位于Android SDK/build-tools/SDK版本/apksigner.bat jarsigner&#xff1a; jarsigner签名空包执行的命令&#xff1a; jar…...

java基础(小技巧)

文章目录 一、日志输出二、字符串拼接三、日期比较四、常用注解五、Lombok的原理 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、日志输出 之前使用的方式。在要使用的类里面定义日志类&#xff1a; private static Logger logger LoggerFactory…...

Android Studio 安装配置教程(Windows最详细版)

目录 前言 Android Studio 下载 Android Studio 安装 Android Studio 使用 一、创建默认项目&#xff08;Compose&#xff09; 二、创建常规项目 三、使用ViewBinding 四、查看Gradle版本、SDK版本、JDK版本 ① Gradle版本 ② SDK版本 ③ JDK版本 前言 Android开发…...

Cesium绘制可编辑线

Cesium 第一章 绘制可编辑线 Screen-2024-09-17-202059的副本 文章目录 Cesium一、绘制线二、编辑线三、使用 一、绘制线 1、方法 //场景相机控制viewer.scene.screenSpaceCameraController.enableRotate false; //cesium相机控制 绘制和编辑时 禁止转动场景// 鼠标样式修改…...

【算法】差分思想:强大的算法技巧

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...