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

vue3学习(二)--- ref和reactive

文章目录

  • ref
    • 1.1 ref将基础类型和对象类型数据转为响应式
    • 1.2 ref()获取id元素
    • 1.3 isRef
  • reactive
    • 1.1 reactive()将引用类型数据转为响应式数据,基本类型无效
    • 1.2 ref和reactive的联系
  • toRef 和 toRefs
    • 1.1 如果原始对象是非响应式的就不会更新视图 数据是会变的

ref

1.1 ref将基础类型和对象类型数据转为响应式

接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。

vue3中定义数据默认不是响应式的数据,需要手动将数据转化为响应式的,这里就用到了ref()

let num1 = 20  //非响应式的import {ref} from 'vue'v
let num1 = ref(20) // 响应式的
  1. ref()可以将数据转为响应式数据
  2. 获取ref(xx)的值需要使用.value的形式,html模板中使用不需要.value因为html中默认就是通过.value来获取值的

1.2 ref()获取id元素

<p ref="demo">获取ref的元素</p>import {ref,onmounted} from 'bue'onMounted(()=>{let demo= ref()  这样就获取了id=demo的元素console.log(demo.value)
})

注意!声明的变量名要跟dom元素的id一致才可以, ref不传任何参数。记得在dom挂载之后再获取

1.3 isRef

判断是不是一个ref对象

import { ref, Ref,isRef } from 'vue'
let message: Ref<string | number> = ref("我是message")
let notRef:number = 123
const changeMsg = () => {message.value = "change msg"console.log(isRef(message)); //trueconsole.log(isRef(notRef)); //false}

reactive

1.1 reactive()将引用类型数据转为响应式数据,基本类型无效

在这里插入图片描述

let _obj = {num: 20,}let objRef = ref(_obj)console.log('ref  obj', objRef.value.num)let obj = reactive(_obj)
console.log('reactive  obj', obj.num) 

在这里插入图片描述
其实ref().value内部是跟reactive()一样的,所以说ref内部是通过reactive实现的。

  1. ref()----用于基本数据类型和引用类型
  2. reactive()----用于引用类型

1.2 ref和reactive的联系

reactive针对引用类型,内部通过new Proxy实现,因为new proxy可以直接拦截引用类型,无法直接在基础类型进行拦截。

ref针对基础类型和引用类型,内部会生成一个对象添加value属性指向数据类型,然后再通过reactivenew proxy)对生成的对象进行拦截。达到响应式的效果。

所以为什么ref的值需要用.value来获取,因为内部生成一个新的带有value属性的对象,只有对象的形式才能使用new proxy进行拦截
在这里插入图片描述


toRef 和 toRefs

作用:
在解构 reactive()得到对象的时候,将解构的数据变成响应式ref()类型.
当然解构出来的数据依旧需要通过.value的形式来操作.
常用于es6的解构赋值操作,因为在对一个响应式对象直接解构时解构后的数据将不再有响应式,而使用toRefs和toRef 可以方便解决这一问题。

 let _obj = {num: 20,}
let obj = reactive(_obj)//toRef 
let num = toRef(obj,'num') //toRefs
let { num } = toRefs(obj)
const handleClick = () => {// obj.num++// toRefs()模式num.value++}

toRef针对对象的单个属性,toRefs直接针对对象,记得需要用.value来获取值

1.1 如果原始对象是非响应式的就不会更新视图 数据是会变的

const obj = {foo: 1,bar: 1
}
const state = toRef(obj, 'bar')
// bar 转化为响应式对象
const state = toRefs(obj)
// obj 转化为响应式对象

obj对象是非响应式的 ,toRef/toRefs可以将obj转为响应式对象,但视图的更新方法在ref reactive中有实现,toRef/toRefs并没有更新视图的功能

toRef/toRefs实现的大体思路是:判断是不是响应式对象,如果是直接返回,如果不是通过ObjectRefImpl()将数据变成响应式


export function toRef<T extends object, K extends keyof T>(object: T,key: K,defaultValue?: T[K]
): ToRef<T[K]> {const val = object[key]return isRef(val)? val: (new ObjectRefImpl(object, key, defaultValue) as any)
}ObjectRefImpl的实现class ObjectRefImpl<T extends object, K extends keyof T> {public readonly __v_isRef = trueconstructor(private readonly _object: T,private readonly _key: K,private readonly _defaultValue?: T[K]) {}get value() {这里没有监听视图变化const val = this._object[this._key]return val === undefined ? (this._defaultValue as T[K]) : val}set value(newVal) {这里没有监听视图变化this._object[this._key] = newVal}
}

下面是ref的源码实现,明显的区别在于toRef没有视图的更新

在这里插入图片描述

相关文章:

vue3学习(二)--- ref和reactive

文章目录 ref1.1 ref将基础类型和对象类型数据转为响应式1.2 ref()获取id元素1.3 isRef reactive1.1 reactive()将引用类型数据转为响应式数据&#xff0c;基本类型无效1.2 ref和reactive的联系 toRef 和 toRefs1.1 如果原始对象是非响应式的就不会更新视图 数据是会变的 ref …...

网络-HTTPS

文章目录 前言一、HTTPS简介优点SSL/TSL工作流程 加密1、对称加密2、非对称加密 二、使用HTTPS1.openSSL生成私钥&#xff08;1&#xff09;node服务端&#xff08;2&#xff09;nginx配置https服务&#xff08;前端&#xff09; nginx服务 总结 前言 Http 存在不安全、无状态…...

GPU提升多分类问题

使用GPU加速多分类问题&#xff0c;与上一篇文章中前几部分代码相同 多层线性网络这里&#xff0c;直接使用nn.Module搭建&#xff0c;与之前自定义搭建的三层网络一样&#xff0c;但注意这里用的激活函数是ReLU的改良后的LeakyReLU&#xff0c;能够避免在输入小于0时出现梯…...

Selenium+Pytest自动化测试框架

前言 selenium自动化 pytest测试框架 本章你需要 一定的python基础——至少明白类与对象&#xff0c;封装继承 一定的selenium基础——本篇不讲selenium&#xff0c;不会的可以自己去看selenium中文翻译网 测试框架简介 测试框架有什么优点呢&#xff1a; 代码复用率高&…...

云原生Kubernetes:Rancher管理k8s集群

目录 一、理论 1.Rancher 2.Rancher 安装及配置 二、实验 1.Rancher 安装及配置 三、问题 1. Rancher 部署监控系统报错 四、总结 一、理论 1.Rancher (1) 概念 Rancher 简介 Rancher 是一个开源的企业级多集群 Kubernetes 管理平台&#xff0c;实现了 Kubernetes …...

Java架构师异步架构设计

目录 1 导学2 为何需要异步消息架构3 消息发送失败该如何处理4 mq接收到消息过后又丢失了消息怎么办5 消费者弄丢了消息该如何处理6 消息重复消费了该怎么处理7 消息的有序处理8 消息堆积该如何处理9 如何提高消息消费的速度10 消息应用的可插拔11 如何设计消息的统一id12 异步…...

电子书制作软件Vellum mac中文版特点

Vellum mac是一款专业的电子书制作软件&#xff0c;它可以帮助用户将文本文件转换为高质量的电子书&#xff0c;支持多种格式&#xff0c;包括EPUB、MOBI、PDF等。Vellum具有直观的用户界面和易于使用的工具&#xff0c;可以让用户快速地创建和发布电子书。 Vellum mac软件特点…...

Langchain 代理 (Agents) ,赋能超级 LLMs

原文&#xff1a;Langchain 代理 (Agents) &#xff0c;赋能超级 LLMs - 知乎 大型语言模型&#xff08;LLMs&#xff09; 非常强大&#xff0c;但它们缺乏“最笨”的计算机程序可以轻松处理的特定能力。逻辑、计算和搜索是计算机通常擅长的领域&#xff0c;但 LLMs 却遇到了困…...

华为OD机考算法题:阿里巴巴找黄金宝箱(1)

题目部分 题目阿里巴巴找黄金宝箱&#xff08;1&#xff09;难度易题目说明一贫如洗的樵夫阿里巴巴在去砍柴的路上&#xff0c;无意中发现了强盗集团的藏宝地&#xff0c;藏宝地有编号从 0 ~ N 的箱子&#xff0c;每个箱子上面贴有一个数字&#xff0c;箱子中可能有一个黄金宝…...

【JAVA版本】websocket获取B站直播弹幕——基于直播开放平台

教程 B站直播间弹幕Websocket获取 — 哔哩哔哩直播开放平台 基于B站直播开放平台开放且未上架时&#xff0c;只能个人使用。 代码实现 1、相关依赖 fastjson2用于解析JSON字符串&#xff0c;可自行替换成别的框架。 hutool-core用于解压zip数据&#xff0c;可自行替换成别的…...

Vue中的监视属性

一、监视属性的使用 &#xff08;一&#xff09;配置watch进行监视 当我们想要监视一个属性改变的时候就可以使用监视属性监视其变化并进行操作。 语法格式如下&#xff1a; watch:{ 监视属性名称 : { // 监视属性的配置项 } } 1. handler函数 当监视的属性发生变化时就调…...

汽车一键启动点火开关按键一键启动按钮型号规格

汽车点火开关/移动管家一键启动按键/汽车改装引擎启动按钮型号&#xff1a;YD828溥款开关 一键启动按钮&#xff08;适用于配套启动主机使用或原车一键启动开关更换&#xff09; 1.适合配套专用板板安装 2.开孔器开孔安装 3.原车钥匙位安装 外观&#xff1a;黑色 按钮上有3种不…...

快速学习微服务保护框架--Sentinel

学习一个框架最好的方式就是查看官方地址,sentinel是国内阿里巴巴公司的,官网更方便官网 官网 微服务保护框架 Sentinel 1.初识Sentinel 1.1.雪崩问题及解决方案 1.1.1.雪崩问题 微服务中&#xff0c;服务间调用关系错综复杂&#xff0c;一个微服务往往依赖于多个其它微…...

bootz启动 Linux内核过程总结

一. bootz启动Linux uboot 启动 Linux内核使用bootz命令。当然还有其它的启动命令&#xff0c;例如&#xff0c;bootm命令等等。 前面几篇文章分析 bootz命令启动 Linux内核的过程中涉及的几个重要函数。 bootz启动 Linux内核过程中涉及的全局变量images_凌肖战的博客-CSDN博…...

前端项目--尚医通学习分享

这段时间跟着线上课程完成了一个项目&#xff1a;商医通&#xff08;基于Vue3TypeScript的医院挂号平台&#xff09;。具体我就不过多地介绍其具体功能以及详细的实现步骤了&#xff0c;感兴趣的小伙伴直接&#xff1a;传送门 。该文章我就分享一下在该项目中学习到的一些知识点…...

【Python】QTreeWidget树形结构添加

源码&#xff1a; # 参考网址&#xff1a; https://blog.csdn.net/weixin_42286052/article/details/129532631 import os.path import sys from PySide6.QtWidgets import QApplication,QMainWindow,QHBoxLayout,QVBoxLayout,QPushButton,QTreeWidget,QTreeWidgetItem,QTreeW…...

day 2 2.3.2 类和对象

具有相同或相似性质的一组对象的抽象就是类 null只能被转换成引用类型&#xff0c;不能转换成基本类型&#xff0c;因此不要把一个null值赋给基本数据类型的变量 Java语言支持的类型分为两类&#xff1a;基本类型和引用类型 基本类型包括boolean类型和数值类型。数值类型有整…...

vscode虚拟环境使用jupyter

在某虚拟环境内安装torch&#xff0c;但是ipyn文件保存后无法正常导入torch 1.conda环境下安装Jupyter等一切配置&#xff0c;进入虚拟环境 2.conda install nb_conda_kernels 3.安装完成后重新打开VSCode&#xff0c;在运行Jupyter notebook中的代码之前&#xff0c;在右上…...

Maven 依赖管理

Maven 一个核心的特性就是依赖管理。当我们处理多模块的项目&#xff08;包含成百上千个模块或者子项目&#xff09;&#xff0c;模块间的依赖关系就变得非常复杂&#xff0c;管理也变得很困难。针对此种情形&#xff0c;Maven 提供了一种高度控制的方法。 可传递性依赖发现 …...

【踩坑】hive脚本笛卡尔积严重降低查询效率问题

前一阵子查看我们公司的大数据平台的离线脚本运行情况, 结果发现有一个任务居然跑了一天多, 要知道这还只是几千万量级的表, 且这个任务是每天需要执行的 于是我把hive脚本捞出来看了下, 发现无非多join了几个复杂的子查询, 应该不至于这么久, 包括我又检查了是不是没有加上每…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

Linux基础开发工具——vim工具

文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...

stm32进入Infinite_Loop原因(因为有系统中断函数未自定义实现)

这是系统中断服务程序的默认处理汇编函数&#xff0c;如果我们没有定义实现某个中断函数&#xff0c;那么当stm32产生了该中断时&#xff0c;就会默认跑这里来了&#xff0c;所以我们打开了什么中断&#xff0c;一定要记得实现对应的系统中断函数&#xff0c;否则会进来一直循环…...