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"}
}

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

ROS组合导航笔记3:GPS导航

GPS 基础概念 GPS 数据有一些限制&#xff1a; GPS 数据不是非常精确&#xff1a;GPS 数据的值会波动&#xff0c;你的位置会经常移动。这是不可避免的&#xff0c;你需要以自己的方式减轻这种误差。里程计数据会减少一些这些误差&#xff0c;但不是全部&#xff0c;因为 Summi…

电脑右击没有txt文件

文本文档是一个好工具&#xff0c;小而快&#xff0c;比word快多&#xff0c;一般情况下&#xff0c;记录都会先用txt文本&#xff0c;但是今天发现右击菜单新建里面没有&#xff0c;怎么回事&#xff1f; 这个需要打开注册编辑表修改 一、打开注册编辑表 win R 输入regedi…

基于EchoMimic加速版,可编辑标志点控制实现逼真音频驱动的肖像动画

EchoMimic 是蚂蚁集团终端技术部门开发的一项技术,旨在通过音频驱动生成逼真的肖像动画。对于那些初次接触这项技术的用户,本教程将带你逐步了解如何设置开发环境、获取项目代码、安装依赖,并最终成功运行示例生成自己的肖像动画。 文章目录 项目代码安装依赖业务拓展参数调…

Python中的元类:掌握类的创建与定制

在面向对象编程中&#xff0c;类是组织代码的重要手段。但在Python中&#xff0c;类本身也是对象&#xff0c;这意味着它们可以被创建、修改甚至定制。元类&#xff08;Metaclass&#xff09;是Python中的一种高级特性&#xff0c;它允许你在类被创建时对其进行修改或增强。本文…

面向对象程序设计(C++)———多态

1.认识多态 多态(polymorphism)的概念&#xff1a;通俗来说&#xff0c;就是多种形态。多态分为编译时多态(静态多态)和运⾏时多态(动态多态)&#xff0c;这⾥我们重点讲运⾏时多态&#xff0c;编译时多态(静态多态)和运⾏时多态(动态多态)。编译时 多态(静态多态)主要就是我们…

WinForms 的支持跨域的测试程序

WinForms 的支持跨域的测试程序 using System; using System.Diagnostics; using System.IO; using System.Net; using System.Text; using System.Text.RegularExpressions; using System.Threading; using System.Windows.Forms;namespace SimpleHttpServer_cors {public par…

Linux进阶命令-awkuniq

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 经过上一章Linux日志的讲解&#xff0c;我们对Linux系统自带的日志服务已经有了一些了解。我们接下来将讲解一些进阶命令&am…

48.面向对象综合训练-手机

1.标准JavaBean类 public class Phone {//属性private String brand;//品牌private String name; //名称private double price;//价钱//给成员变量brand赋值public void setBrand(String b) {brand b;}//对外提供brand的值public String getBrand() {return brand;}//给成员变…

YOLOV5 yolov3绝缘子检测代码+数据集 绝缘子数据集 classes :Insulator

输电线绝缘子数据集详解 输电线绝缘子作为电力系统中的重要组件&#xff0c;其运行状态直接影响到电网的安全稳定运行。近年来&#xff0c;随着人工智能技术的进步&#xff0c;特别是计算机视觉和深度学习的发展&#xff0c;输电线绝缘子的缺陷检测已经成为自动化巡检和维护的…

vivado中选中bd文件后generate output product是什么用,create HDL wrapper是什么用

vivado中选中bd文件后generate output product是什么用 在Vivado中&#xff0c;“Generate Output Products” 是一个重要的步骤&#xff0c;它用于生成IP核的输出产品&#xff0c;这些产品是将IP核集成到设计中所需的文件。这些输出产品包括&#xff1a; 综合文件&#xff…

STM32外设-0.96寸OLED显示屏

江科大OLED教程&#xff1a;01-快速上手&#xff08;上集&#xff09;_哔哩哔哩_bilibili 01 0.96寸OLED显示屏原理 1.1 0.96寸OLED显示屏简介 适用器件&#xff1a; 0.96寸OLED显示屏&#xff08;驱动芯片&#xff1a;SSD1306 / SSD1315&#xff09; 1.3寸OLED显示屏&…

C++--类的实例化

一、实例化的概念 用类类型在屋里内存中创建对象的过程&#xff0c;称为类实例化出对象 类是对对象进行一种抽象描述&#xff0c;是一个模型一样的东西&#xff0c;限定了类有哪些成员变量&#xff0c;这些成员变量只是声明&#xff0c;没有分配空间&#xff0c;用类实例化出…

Bugku---密码学---乐谱密码

题目出处&#xff1a;首页 - Bugku CTF ✨打开后发现是一张乐符图 ✨一般我们所熟悉的「Do Re Mi Fa Sol La Si」&#xff0c;若写成音名&#xff0c;即是「C D E F G A B」。不过德国人习惯使用的音名则是「C D E F G A H」&#xff0c;「B」代表 音名B♭ 。 C也就是后面的4&…

Visual Studio 2019/2022 IntelliCode(AI辅助IntelliSense)功能介绍

IntelliCode 不知在多久以前&#xff0c;我装上了Visual Studio 2019&#xff0c;写代码时&#xff0c;就注意到了下面这样的东西&#xff1a;带五角星的提示。 这个带五角星的提示功能叫做IntelliCode。 我们知道Visual Studio 有个强大的功能叫做Intellisense(智能感知)&am…

与Linux的初见

一、UNIX发展历史&#xff1a; 1965年&#xff0c;美国麻省理工学院&#xff08;MIT&#xff09;、通用电气公司&#xff08;GE&#xff09;及AT&T的贝尔实验室联合开发Multics工程计划&#xff0c;其目标是开发一种交互式的具有多道程序处理能力的分时操作系统&#xff0…

算法leecode笔记

具体代码&#xff1a; class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int, int> hashtable;for (int i 0; i < nums.size(); i) {auto it hashtable.find(target - nums[i]);if (it ! hashtable.end…

phpstudy 建站使用 php8版本打开 phpMyAdmin后台出现网页提示致命错误:(phpMyAdmin这是版本问题导致的)

报错提示&#xff1a; 解决方法&#xff1a;官网下载phpmyadmin 5.2.1版本。 下载地址&#xff1a;phpMyAdmin 将网站根目录phpMyAdmin4.8.5里面的文件换成 官网下载的5.2.1版本即可。 重启网站&#xff0c;打开phpMyAdmin后台即可&#xff08;若打不开更改 mysql密码即可&am…

java多线程模拟多个售票员从同一个票池售票

程序功能 这段代码模拟了多个售票员从一个有限的票池中售票的过程。主要功能如下&#xff1a; 票池共有50张票&#xff0c;多个售票员&#xff08;线程&#xff09;并发进行售票。 使用同步机制确保线程安全&#xff0c;避免多个售票员同时出售同一张票。 每个售票员不断检查票…

阿里轻量应用服务器绑定聚合网域名宝塔镜像

服务器配置&#xff1a;地区:香港 、应用镜像:BT-Panel 初始化操作 BT-Panel使用步骤 1 获取面板管理密码 1. 复制密码查询命令 2. 远程登录服务器 3. 粘贴-回车执行 4.获取密码 2 登录面板 1.到防火墙页面开启8888端口 2. http://公网ip:8888 3. 输入管理帐号密码 …

02-查找Mac系统安装的python解释器路径

第一种方法 import sys print(sys.path) 第二种方法 在终端控制台使用命令 which python3