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

【vue3】ref , reactive ,toRef ,toRefs 使用和理解

这篇文章是基于理解写的,仅助于理解,如有任何错误之处,感谢指正!

文章目录

  • 一.`ref`的使用
    • 1. `ref`的功能主要有两个:
    • 2.使用`ref`注意事项
  • 二.`reactive`的使用
  • 三.使用`ref` 和 `reactive` 实现双向数据绑定
  • 四.`toRef` 和 `toRefs` 的使用

一.ref的使用

1. ref的功能主要有两个:

  • 使用ref 将普通数据包装成响应式,
    响应式的理解
    vue3中定义的普通数据是没办法在数据改变的时候将视图层(页面)改变的
    在这里插入图片描述
<template>
//视图层<div><div><h1>普通数据:{{testa}}</h1>  </div><div><h1>响应式数据:{{testb}}</h1>  </div><button  @click="change1">改变普通数据</button><button  @click="change2">改变响应式数据</button></div>   
</template>
<script setup>
//逻辑层
import { ref } from "vue"//普通数据
let testa='aaaa'
//ref将普通数据包装为响应式数据
let testb=ref('aaa')//定义改变普通数据,当点击事件调用此方法
const change1 =()=>{
//改变普通数据  testa='bbb'}//改变响应式数据, 使用ref包装的必须在逻辑层使用 test.value ,视图层不用加value
const change2 =()=>{testb.value='bbb'
}
</script>
  • 使用ref可以获取dom元素,testdom.value会获取标签,testdom.value.click()可以调用点击事件
<template><div>//要获取的dom节点,在标签内使用ref属性<span  ref="testdom" @click="change">aaa</span></div>   
</template>
<script setup>import { onMounted, ref } from "vue";
//获取定义的dom节点  , 名称保持一致
let testdom=ref();//在页面挂载时,打印dom节点
onMounted(()=>{console.log(testdom.value)
})
</script>

结果
在这里插入图片描述

2.使用ref注意事项

  1. ref是对原数据进行拷贝并不会影响原数据
//原数据
let test='aaa'
//使用ref包装成响应式数据
let testref=ref(test)//改变响应式数据
let testref.value='bbb'
//testref已经改变,但是test没有改变//没有原数据,直接使用响应式数据,上述可以忽略
let aaref=ref(0)
  1. ref包装的响应式数据,在使用时要使用value属性,如aaref.value注意,在视图层(html中)不需要使用value,在逻辑层(js代码里)进行赋值要使用value
  2. ref可以包装的类型
ref常见包装类型获取值
数值类型:ref(0)test.value
字符类型:ref(’1231‘)test.value
空类型:ref(null)test.value
数组类型:ref([])test.value[0]
对象类型:ref({name:[]})test.name.value[]

二.reactive的使用

  1. reactive只能包装引用类型,基本类型无法响应,会将基本类型包装成对象,直接修改对象reative无法响应
//会将0包装成对象,直接改变对象,无法做出响应
let test1=reactive(0)
test1=2
//这个可以,推荐
let test1=reactive({num:0})
test1.num=1
  1. reactive 推荐使用例如 {name:'aaa',list: []} 形式数据,同时使用时直接test.name 不需要value

三.使用refreactive 实现双向数据绑定

要将refreactive 包装的数据 使用v-model引用,一般会在表单输入框,选择器等使用

  1. ref 双向数据绑定,当视图层内容改变,逻辑层的值也会改 ,可以获取输入框的值
<template><input   v-model="inputtest" />
</template>
<script>let inouttest=ref('')
</script>
  1. reactive 双向数据绑定 , 使用v-model与属性名绑定
<template>姓名:<input    v-model="test.name" />号码:<input   v-model="test.mobile" />
</template>
<script>let test=reactive({name:'',mobile:null})
</script>

四.toReftoRefs 的使用

  1. 理解
    toReftoRefs 是将对象数据包装成响应式数据 ,只不过响应式数据绑定的是原数据 ,响应式数据修改的时候改变的是原数据
    在这里插入图片描述
  2. toRef使用
    toRef会将对象的单一属性分装成响应式数据
let person={name:'aaaa',password:'12314'}
//使用toRef 参数一是对象 参数二是要绑定的某一属性
let name=toRef(person,'name')
//修改name,会同时修改对象绑定的属性值也就是person.name
name=’ccc‘
  1. toRefs使用
    toRefs会将对象所有属性封装成响应式数据 ,参数是对象 ,toRefs会将对象所有属性遍历, 每个属性进行toRef
let person={name:'aaaa',password:'12314'}
//对响应式对象进行解构赋值,将name属性单独取出来
let {name} = toRefs(person)
  1. reactive对象使用toRefs
    对普通对象使用toRefs ,只会修改原数据 ,并不会刷新视图层 ,对reactive对象使用toRefs ,当数据修改时 ,由于绑定了reactive即会修改reactive原数据 ,又因为reactive本身绑定了视图层又会刷新视图层
    注意,使用toRefsreactive封装,是将reactive的对象数据的属性封装成了ref,使用时必须加.value
    在这里插入图片描述
let person= reactive({name:'1231',password:'14144'})let name=toRefs(person)//修改name会同时修改person和视图层. 一定要加.valuename.value='2222'

知识小贴士:在<script> 标签内使用setup,如<script setup>
定义的变量和方法,不用再手动return,要使用的组件直接import, 不需要注册, 其他和setup()相同
在这里插入图片描述

相关文章:

【vue3】ref , reactive ,toRef ,toRefs 使用和理解

这篇文章是基于理解写的&#xff0c;仅助于理解&#xff0c;如有任何错误之处&#xff0c;感谢指正&#xff01; 文章目录一.ref的使用1. ref的功能主要有两个&#xff1a;2.使用ref注意事项二.reactive的使用三.使用ref 和 reactive 实现双向数据绑定四.toRef 和 toRefs 的使用…...

fastadmin:如何点击按钮弹出存在的指定页面的弹窗

样式&#xff1a;方法一&#xff1a;直接使用超链接进行操作{:url(popup/purchase/itemno)}&#xff1a;表示地址信息btn-dialog&#xff1a;表示弹窗<a href"{:url(popup/purchase/itemno)}" title"跳转第三方" class"btn btn-success btn-dialog…...

【storybook】你需要一款能在独立环境下开发组件并生成可视化控件文档的框架吗?(三)

storybook插件addons核心插件插件APIargTypes写文档组件注释法MDX生成在线可视化UI文档上一篇&#xff1a; https://blog.csdn.net/tuzi007a/article/details/129194267插件addons 插件用于增强storybook的UI功能。 核心插件 storybook/addon-essentials 它几乎控制了整个s…...

Android源码分析 —— Activity栈管理(基于Android8)

0. 写在前面 本文基于 Android8.0源码&#xff0c;和Android9.0大同小异&#xff0c;但和Android10.0差别非常大&#xff01;新版改用ATM来管理Activity的启动&#xff0c;Activity的生命周期也通过XXXItem来管理。由于我分析的Activity启动流程就是基于Android8/9的&#xff…...

Python实现贝叶斯优化器(Bayes_opt)优化支持向量机分类模型(SVC算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。1.项目背景贝叶斯优化器(BayesianOptimization) 是一种黑盒子优化器&#xff0c;用来寻找最优参数。贝叶斯优化器是基…...

【华为OD机试模拟题】用 C++ 实现 - 分积木(2023.Q1)

最近更新的博客 华为OD机试 - 入栈出栈(C++) | 附带编码思路 【2023】 华为OD机试 - 箱子之形摆放(C++) | 附带编码思路 【2023】 华为OD机试 - 简易内存池 2(C++) | 附带编码思路 【2023】 华为OD机试 - 第 N 个排列(C++) | 附带编码思路 【2023】 华为OD机试 - 考古…...

FFmpeg/OpenCV 实现全屏斜体水印

实现思路 &#x1f914;​ 基于ffmpeg&#xff0c;画布的方式&#xff0c;创建画布 -> 水印 -> 旋转 -> 抠图 -> 叠加到图像上基于ffmpeg&#xff0c;旋转图片的方式&#xff0c;填充 -> 水印 -> 顺时针旋转 -> 逆时针旋转 -> 截图基于opencv&#xff…...

Calendar计算两个时间之间相差几个月

目录说明说明 计算两个时间之间相差几个月&#xff1a; public int getMonth(String startDt, String endDt) { int month 0;try {SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Calendar satrt Calendar.getInstance();Calendar end Cal…...

FPGA基础知识

FPGA是在PAL、PLA和CPLD等可编程器件的基础上进一步发展起来的一种更复杂的可编程逻辑器件。它是ASIC领域中的一种半定制电路&#xff0c;既解决了定制电路的不足&#xff0c;又克服了原有可编程器件门电路有限的缺点。 由于FPGA需要被反复烧写&#xff0c;它实现组合逻辑的基…...

C语言运算符逻辑运算符位运算符

逻辑运算符 下表显示了 C 语言支持的所有关系逻辑运算符。假设变量 A 的值为 1&#xff0c;变量 B 的值为 0&#xff0c;则&#xff1a; 运算符 描述 实例 && 称为逻辑与运算符。如果两个操作数都非零&#xff0c;则条件为真。 (A && B) 为假。 || 称为逻辑…...

机器学习:基于主成分分析(PCA)对数据降维

机器学习&#xff1a;基于主成分分析&#xff08;PCA&#xff09;对数据降维 作者&#xff1a;AOAIYI 作者简介&#xff1a;Python领域新星作者、多项比赛获奖者&#xff1a;AOAIYI首页 &#x1f60a;&#x1f60a;&#x1f60a;如果觉得文章不错或能帮助到你学习&#xff0c;可…...

软件测试之测试模型

软件测试的发展 1960年代是调试时期&#xff08;测试即调试&#xff09; 1960年 - 1978年 论证时期&#xff08;软件测试是验证软件是正确的&#xff09;和 1979年 - 1982年 破坏性测试时期&#xff08;为了发现错误而执行程序的过程&#xff09; 1983年起&#xff0c;软件测…...

【项目精选】网络考试系统的设计与实现(源码+视频+论文)

点击下载源码 网络考试系统主要用于实现高校在线考试&#xff0c;基本功能包括&#xff1a;自动组卷、试卷发布、试卷批阅、试卷成绩统计等。本系统结构如下&#xff1a; &#xff08;1&#xff09;学生端&#xff1a; 登录模块&#xff1a;登录功能&#xff1b; 网络考试模块…...

Python近红外光谱分析与机器学习、深度学习方法融合实践技术

、 第一n入门基础【理论讲解与案 1、Python环境搭建&#xff08; 下载、安装与版本选择&#xff09;。 2、如何选择Python编辑器&#xff1f;&#xff08;IDLE、Notepad、PyCharm、Jupyter…&#xff09; 3、Python基础&#xff08;数据类型和变量、字符串和编码、list和tu…...

实例7:树莓派呼吸灯

实例7&#xff1a;树莓派呼吸灯 实验目的 通过背景知识学习&#xff0c;了解digital与analog的区别。通过GPIO对外部LED灯进行呼吸控制&#xff0c;熟悉PWM技术。 实验要求 通过python编程&#xff0c;用GPIO控制LED灯&#xff0c;使之亮度逐渐增大&#xff0c;随后减小&am…...

java 接口 详解

目录 一、概述 1.介绍 : 2.定义 : 二、特点 1.接口成员变量的特点 : 2.接口成员方法的特点 : 3.接口构造方法的特点 : 4.接口创建对象的特点 : 5.接口继承关系的特点 : 三、应用 : 1.情景 : 2.多态 : ①多态的传递性 : ②关于接口的多态参数和多态…...

用 Visual Studio 升级 .NET 项目

现在&#xff0c;你已可以使用 Visual Studio 将所有 .NET 应用程序升级到最新版本的 .NET&#xff01;这一功能可以从 Visual Studio 扩展包中获取&#xff0c;它会升级你的 .NET Framework 或 .NET Core 网页和桌面应用程序。一些项目类型仍正在开发中并将在不久的未来推出&a…...

JavaWeb中FilterListener的神奇作用

文章目录1&#xff0c;Filter1.1 Filter概述1.2 Filter快速入门1.2.1 开发步骤1.3 Filter执行流程1.4 Filter拦截路径配置1.5 过滤器链1.5.1 概述1.5.2 代码演示1.5.3 问题2&#xff0c;Listener2.1 概述2.2 分类2.3 代码演示最后说一句1&#xff0c;Filter 1.1 Filter概述 F…...

移动端布局

参考链接&#xff1a;抖音-移动端适配 一、移动端布局 flexiblepostcss-pxtorem vue-h5-template 老版本&#xff1a;动态去计算scale&#xff0c;并不影响rem的计算&#xff0c;好处是解决了1px的问题&#xff0c;但是第三方库一般都用dpr为1去做的&#xff0c;这就导致地图或…...

前端无感登录,大文件上传

后端设置token的一个失效时间&#xff0c;前端在token失效后不用重新登录 1&#xff0c;在相应中拦截&#xff0c;判断token返回过期后&#xff0c;调用刷新token的方法 2&#xff0c;后端返回过期的时间&#xff0c;前端判断过期的时间&#xff0c;然后到期后调用对应的方法…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...