【Vue3】使用ref与reactive创建响应式对象

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!
请添加图片描述

文章目录

  • 🍋介绍ref
  • 🍋介绍reactive
  • 🍋ref扩展
  • 🍋ref和reactive对比
  • 🍋总结

🍋介绍ref

先来简单介绍一下ref,它可以定义响应式的变量

  • 语法:let xxx = ref(初始值)
  • **返回值:**一个RefImpl的实例对象,简称ref对象refref对象的value属性是响应式的
  • 注意点:
    • JS中操作数据需要:xxx.value,但模板中不需要.value,直接使用即可。
    • 对于let name = ref('张三')来说,name不是响应式的,name.value是响应式的。

下面我们看一看
在这里插入图片描述
上图红框中代表的意思是,我们哪里需要响应就在哪个里面导入上述代码即可
在这里插入图片描述
同时我们要在js中为变量添加value,否则不会更新,如下图所示

请添加图片描述

<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>地址:{{address}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div></template><script lang="ts" setup name="Person11">import {ref} from 'vue'let name = ref('馒头')let age = ref(18)let tel = '11514611254'let address = '北京市'function changeName() {name.value = 'zhang-san' console.log(name) }function changeAge() {age.value += 1 console.log(age) }function showTel() {alert(tel)}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

🍋介绍reactive

相对比ref,reactive针对自定义的对象数组等

  • 语法:let 响应式对象= reactive(源对象)
  • **返回值:**一个Proxy的实例对象,简称:响应式对象。
  • 注意点:reactive定义的响应式数据是“深层次”的。

实际例子如下

<template><div class="person"><h2>{{Handmade.name}}手办,价值{{ Handmade.price }}元</h2><button @click="changePrice">修改价格</button></div></template><script lang="ts" setup name="Person11">import {reactive} from 'vue'let Handmade = reactive({name:'小舞',price:888})function changePrice() {Handmade.price += 50}</script>

如果是数组呢

<template><div class="person"><h2>{{Handmade.name}}手办,价值{{ Handmade.price }}元</h2><button @click="changePrice">修改价格</button><br><h2>运动:</h2><ul><li v-for="i in sports" :key="i.id">{{i.name}}</li></ul><button @click="changeFirstGame">修改第一个运动的名字</button></div></template><script lang="ts" setup name="Person11">import {reactive} from 'vue'let Handmade = reactive({name:'小舞',price:888})let sports = reactive([{id:'a',name:'足球'},{id:'b',name:'篮球'},{id:'c',name:'乒乓球'}])function changePrice() {Handmade.price += 50}function changeFirstGame(){sports[0].name = '羽毛球'}</script>

运行结果如下
请添加图片描述

==注意:==深层次的数据也行可以的

let obj = reactive({a:{b:{c:666}}})

下面再进行扩展一下知识点
在这里插入图片描述

🍋ref扩展

前面说ref可以定义基本类型,但是这里我再说明一下,其实ref也可以创建对象类型,但是reactive确实不可以定义基本类型

 <script lang="ts" setup name="Person11">import {ref} from 'vue'let Handmade = ref({name:'小舞',price:888})let sports = ref([{id:'a',name:'足球'},{id:'b',name:'篮球'},{id:'c',name:'乒乓球'}])function changePrice() {Handmade.value.price += 50}function changeFirstGame(){sports.value[0].name = '羽毛球'}</script>

其实只需要注意一点,别忘了ref在js中的书写要求要加.value
ref接收的是对象类型,内部其实也是调用了reactive函数。

🍋ref和reactive对比

宏观角度看:

  1. ref用来定义:基本类型数据对象类型数据

  2. reactive用来定义:对象类型数据

  • 区别:
  1. ref创建的变量必须使用.value(可以使用volar插件自动添加.value)。
    在设置–》扩展–》Volar
    在这里插入图片描述
  1. reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。
    其实就是不能重复写同一个对象
  • 使用原则:
  1. 若需要一个基本类型的响应式数据,必须使用ref
  2. 若需要一个响应式对象,层级不深,refreactive都可以。
  3. 若需要一个响应式对象,且层级较深,推荐使用reactive

🍋总结

本文根据禹神课程进行总结,本节主要介绍ref和reactive

请添加图片描述

挑战与创造都是很痛苦的,但是很充实。

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

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

相关文章

Java面试题:volatile专题

王有志,一个分享硬核Java技术的互金摸鱼侠 加入Java人的提桶跑路群:共同富裕的Java人 今天是《面霸的自我修养》第4篇文章,我们一起来看看面试中会问到哪些关于volatile的问题吧。数据来源: 大部分来自于各机构(Java之父,Java继父,某灵,某泡,某客)以及各博主整理文档…

攻防世界-web-Training-WWW-Robots

题目信息 In this little training challenge, you are going to learn about the Robots_exclusion_standard. The robots.txt file is used by web crawlers to check if they are allowed to crawl and index your website or only parts of it. Sometimes these files rev…

[word] 如何将word文本转换成表格? #知识分享#学习方法#媒体

如何将word文本转换成表格&#xff1f; 如何将word文本转换成表格&#xff1f;不管是Word入门新手还是老手&#xff0c;相信这个技巧会让你更加熟练Word&#xff0c;操作起来得心应手&#xff01; 1.文本转换成表格 同样的要怎么把一堆凌乱的数据转换成表格呢&#xff1f;这里…

排序算法——归并排序

基本思想 归并排序是建立在归并操作上的一种非常有效的排序算法。该算法是采用分治法的一个非常典型的应用。将已有的子序列合并&#xff0c;得到完全有序的序列。即先使每个子序列有序&#xff0c;再使子序列段间有序。若将两个有序表合并成一个有序表&#xff0c;称为二路并…

凸包表面积、体积、包围框的坐标、对角线

凸包表面积、体积、包围框的坐标、对角线 一、算法原理1.计算表面积.2.计算体积3.返回包围框最大值坐标4.返回包围框最小值坐标5.包围盒的对角线长度 二、代码三、结果展示1.函数信息展示2.点云数据3.凸包后数据 四、相关链接 一、算法原理 1.计算表面积. area hull.get_sur…

【JavaEE】_synchronized关键字——监视器锁monitor lock

目录 1. synchronized的特性 2. synchronized的使用 3. Java标准库中的线程安全类 1. synchronized的特性 &#xff08;1&#xff09;互斥&#xff1a; 前文已经介绍&#xff0c;某个线程执行到某个对象的synchronized中时&#xff0c;其他线程如果也执行到同一个对象&…

数据结构day1

定义一个学生结构体&#xff0c;包含结构体成员&#xff1a;身高&#xff0c;姓名&#xff0c;成绩&#xff1b;定义一个结构体数组有7个成员&#xff0c;要求终端输入结构体成员的值&#xff0c;根据学生成绩&#xff0c;进行冒泡排序。 #include <stdio.h> #include &l…

14. UE5 RPG使用GameplayTag

GameplayTag本来是应用在GAS游戏技能系统里面的&#xff0c;后来UE直接将其抽离出来&#xff0c;作为一个模块&#xff0c;现在可以不在GAS里也可以使用这个模块。比如&#xff0c;我需要判断一个射线拾取的物体&#xff0c;首先我需要判断这个actor是否存在&#xff0c;然后判…

Linux:sed进阶(12)

Linux&#xff1a;shell脚本&#xff1a;基础使用&#xff08;5&#xff09;《正则表达式-sed工具》_linux脚本表达式s-CSDN博客https://blog.csdn.net/w14768855/article/details/132347574?ops_request_misc%257B%2522request%255Fid%2522%253A%252217084222871680019707523…

STM32使用软件SPI协议操作TFT18彩屏

时间记录&#xff1a;2024/2/20 一、SPI协议介绍 &#xff08;1&#xff09;SPI设备通过4根线进行通信&#xff0c;CS片选线&#xff0c;选择从设备&#xff0c;SCK时钟线&#xff0c;由主设备产生时钟&#xff0c;主机MOSI线连从机MISO线&#xff0c;由主机向从机发送信息&am…

openEuler 22.03 LTS 上源码安装 PostgreSQL 15

安装PostgreSQL 15 1 安装必要的依赖 #yum install -y readline-devel zlib-devel gcc2、下载源码 # wget https://ftp.postgresql.org/pub/source/v15.6/postgresql-15.6.tar.gz # tar -xzvf postgresql-15.6.tar.gz3 配置 # cd postgresql-15.6/ # ./configure4 编译安装…

mac东西拷不进硬盘怎么回事 mac东西拷不进硬盘怎么办 mac硬盘读不出来怎么解决 mac拷贝不了东西到u盘

有时候我们在使用mac的过程中&#xff0c;可能会遇到一些问题&#xff0c;比如mac东西拷不进硬盘。这是一种很常见的情况&#xff0c;但是会影响我们的工作和生活。那么&#xff0c;mac东西拷不进硬盘是怎么回事呢&#xff1f;mac东西拷不进硬盘又该怎么办呢&#xff1f;本文将…

Flutter 动画(显式动画、隐式动画、Hero动画、页面转场动画、交错动画)

前言 当前案例 Flutter SDK版本&#xff1a;3.13.2 显式动画 Tween({this.begin,this.end}) 两个构造参数&#xff0c;分别是 开始值 和 结束值&#xff0c;根据这两个值&#xff0c;提供了控制动画的方法&#xff0c;以下是常用的&#xff1b; controller.forward() : 向前…

自助点餐系统微信小程序,支持外卖、到店等

总体介绍 系统总共分为三个端&#xff1a;后端&#xff0c;后台管理系统、微信小程序。 基于当前流行技术组合的前后端分离商城系统&#xff1a; SpringBoot2MybatisPlusSpringSecurityjwtredisVue的前后端分离的商城系统&#xff0c; 包含分类、sku、积分、多门店等 预览图…

【动态规划专栏】专题一:斐波那契数列模型--------4.解码方法

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…

深度学习基础——卷积神经网络(一)

卷积操作与自定义算子开发 卷积是卷积神经网络中的基本操作&#xff0c;对于图像的特征提取有着关键的作用&#xff0c;本文首先介绍卷积的基本原理与作用&#xff0c;然后通过编写程序实现卷积操作&#xff0c;并展示了均值、高斯与sobel等几种经典卷积核的卷积效果&#xff…

变分自编码器(VAE)PyTorch Lightning 实现

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…

290. Word Pattern(单词规律)

题目描述 给定一种规律 pattern 和一个字符串 s &#xff0c;判断 s 是否遵循相同的规律。 这里的 遵循 指完全匹配&#xff0c;例如&#xff0c; pattern 里的每个字母和字符串 s 中的每个非空单词之间存在着双向连接的对应规律。 提示: 1 < pattern.length < 300 pa…

安装VMware+安装Linux

以上就是VMware在安装时的每一步操作&#xff0c;基本上就是点击 "下一步" 一直进行安装 安装Linux VMware虚拟机安装完毕之后&#xff0c;我们就可以打开VMware&#xff0c;并在上面来安装Linux操作系统。具体步骤如下&#xff1a; 1). 选择创建新的虚拟机 2). 选…

C. LR-remainders

思路&#xff1a;正着暴力会tle&#xff0c;所以我们可以逆着来。 代码&#xff1a; #include<bits/stdc.h> #define int long long #define x first #define y second #define endl \n #define pq priority_queue using namespace std; typedef pair<int,int> p…