Vue3:响应式数据的基本使用(ref、reactive)

一、前言

  • 在Vue3中,如果数据不是响应式数据,当数据的值发生改变时,页面上的数据是不会发生改变的。
  • 因此本文主要介绍Vue3中响应式数据的使用,包括ref和reactive的基本使用。

二、ref

1、ref —— 创建基本类型的响应式数据
  • ref 可以定义基本类型的响应式变量
  • 语法 :
let xxx=ref(初始值)
  • 返回值:
    是一个RefImpl的实例对象,简称ref对象或ref,ref对象中的value属性是响应式的。
  • 其他:
    在JS中操作数据需要使用 "xxx.value"的形式,但在模板中不需要用. value,直接使用即可。
(1)引入ref
import {ref} from ' vue '
(2)代码
  • 代码解析

在这里插入图片描述

  • 完整代码
<template><p>个人信息:</p><p>性别:{{ gender }}</p><p>年龄:{{ age }}</p><button @click="ageChange">点击年龄加1</button>
</template><script setup>
import { ref } from "vue";// 数据
let gender = ref("女");
let age = ref(25);// 方法
function ageChange() {age.value += 1;
}
</script>
  • 结果:
    在这里插入图片描述

  • 点击按钮,响应式数据会在页面上发生变化:

在这里插入图片描述

2、ref —— 创建对象类型的响应式数据

ref也可以创建对象类型的响应式数据。

(1)代码解析
  • ref可以定义以下类型的数据:

在这里插入图片描述

  • 修改ref的数据时记得.value的使用以及使用顺序:
    在这里插入图片描述

  • 在模板中,不需要使用.value

在这里插入图片描述

(2)完整代码
<template><p>小明的年龄是:{{ info.age }}</p><p>小明的身高是:{{ info.height }} cm</p><button @click="ageChange">点击年龄加1</button><button @click="heightChange">点击身高加1</button><br /><h2>星座列表:</h2><ul><li v-for="item in Constellation" :key="item.id">{{ item.star }}</li></ul><button @click="ConstellationChange">点击修改第二个星座名称</button>
</template><script setup>
import { ref } from "vue";// 数据
let info = ref({age: 20,height: 165,
});
let Constellation = ref([{ id: 1, star: "双子座" },{ id: 2, star: "狮子座" },{ id: 3, star: "巨蟹座" },
]);// 方法
function ageChange() {info.value.age += 1;
}
function heightChange() {info.value.height += 1;
}
function ConstellationChange() {Constellation.value[1].star = "处女座";
}
</script>  

三、reactive

1、概念

reactive只能定义对象类型的响应式数据,例如:

  • 数据1:
let info = reactive({age: 20,height: 165,
});
  • 数据2:
let Constellation = reactive([{ id: 1, star: "双子座" },{ id: 2, star: "狮子座" },{ id: 3, star: "巨蟹座" },
]);
  • 而以下代码是错误的(reactive不能定义基本类型的数据):
let name=reactive("张三")
2、代码
<template><p>小明的年龄是:{{ info.age }}</p><p>小明的身高是:{{ info.height }} cm</p><button @click="ageChange">点击年龄加1</button><button @click="heightChange">点击身高加1</button><br /><h2>星座列表:</h2><ul><li v-for="item in Constellation" :key="item.id">{{ item.star }}</li></ul>
</template><script setup>
import { reactive } from "vue";// 数据
let info = reactive({age: 20,height: 165,
});
let Constellation = reactive([{ id: 1, star: "双子座" },{ id: 2, star: "狮子座" },{ id: 3, star: "巨蟹座" },
]);// 方法
function ageChange() {info.age += 1;
}
function heightChange() {info.height += 1;
}
</script>
  • 结果:
    在这里插入图片描述

  • 点击按钮,响应式数据会在页面上发生变化:

在这里插入图片描述

3、注意事项
  • reactive重新分配一个新对象, 会失去响应式;可以使用object . assign去整体替换,举例:

原本有数据如下:

// 数据
let info = reactive({age: 20,height: 165,
});

点击按钮对整体数据进行修改:

function infoChange() {info={age: 30,height: 185,
}
}

但是这样修改数据之后,点击按钮数据并不会修改:
在这里插入图片描述

而使用object . assign可以让页面的数据进行更新:

function infoChange() {Object.assign(info, {age: 30,height: 185,});
}

在这里插入图片描述
结果如下:
在这里插入图片描述

四、总结

  • ref可以定义基本类型数据、对象类型数据;reactive只能定义对象类型数据
  • 若需要一个响应式对象,层级不深,ref 、reactive 都可以
  • 若需要一个响应式对象,且层级较深,推荐使用reactive

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

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

相关文章

Python-VBA函数之旅-globals函数

目录 一、globals函数的常见应用场景&#xff1a; 二、globals函数与locals函数对比分析&#xff1a; 1、globals函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、推荐阅读&#xff1a; 个人主页&#xff1a;https://blog.csdn.net/ygb_1024?spm101…

【Camera Sensor Driver笔记】三、点亮指南之Sensor DTS

camera sensor 接口配置 xxsensor.cpp -> xxxsensor.so CalculateExposure 函数 pCalculateExposure函数 &#xff08;平台&#xff09;输入参数: pCalculateExposureData realgain &#xff1a;total gain&#xff0c;ae算法传过来的值或者手动曝…

Python的round与Excel的round不一样?

Python四舍五入怎么做 round()奇进偶舍round函数既不是“四舍五入”的原则&#xff0c;也不是“四舍六入无成双”的原则。 decimal round() 偶然发现python的round函数和excel的round函数对某些数据的处理结果不一致。有看到博主提到是奇进偶舍的方法&#xff0c;但经过验证和…

【QT教程】QT6 Quick与QML

QT6Quick与QML 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费Q…

49-PCIE转网口电路设计

视频链接 PCIE转网口电路设计01_哔哩哔哩_bilibili PCIe转网口电路设计 1、PCIE转网口电路设计基本介绍 pcie转网口的设计&#xff0c;一般有intel (i350)和网讯&#xff08;wx1860&#xff09;两种方案。 2、PCIE转网口的方案 2.1、I350 2.2、WX1860 (网迅) 国产化&#…

linux C -- 消息队列

linux C -- 消息队列 前言一、System V(IPC)消息队列接口调用主要涉及到 msgget、msgsnd、msgrcv 和 msgctl 四个接口&#xff1a; 1、创建消息队列 msgget2、发送消息到队列3、从队列接收信息4、控制消息队列 msgctl5、删除消息队列 二、代码编写1、发送部分的代码2、代码完成…

BYOL(NeurIPS 2020)原理解读

paper&#xff1a;Bootstrap your own latent: A new approach to self-supervised Learning third-party implementation&#xff1a;https://github.com/open-mmlab/mmpretrain/blob/main/mmpretrain/models/selfsup/byol.py 本文的创新点 本文提出了一种新的自监督学习方…

获取会话公钥

----------------------------------------------------举例 签到 接口开始--------------------------------------------------- 第一步&#xff1a;-----请求报文明文:{"body":{},"head":{"ywId":"GY0001"}} ODxdq2/WhHlCKoLIGNV2j…

uniapp picker 多列选择器用法

uniapp picker 多列选择器联动筛选器交互处理方法&#xff0c; uniapp 多列选择器 mode"multiSelector" 数据及筛选联动交互处理&#xff0c; 通过接口获取数据&#xff0c;根据用户选择当前列选项设置子列数据&#xff0c;实现三级联动效果&#xff0c; 本示例中处…

SEW减速机参数查询 2-2 实践

首先说说结论&#xff1a;在不和SEW官方取得沟通之前&#xff0c;你几乎无法直接通过查阅SEW官方文档得到相关减速机的所有技术参数&#xff1a;比如轴的模数和齿数&#xff0c;轴承的参数。我在周一耗费了一个上午&#xff0c;最终和SEW方面确认后才知晓相关技术参数需要凭借销…

Jenkins的安装和部署

文章目录 概述Jenkins部署项目的流程jenkins的安装启动创建容器进入容器浏览器访问8085端口 Jenkins创建项目创建example项目 概述 Jenkins&#xff1a;是一个开源的、提供友好操作界面的持续集成&#xff08;CLI&#xff09;工具&#xff0c;主要用于持续、自动构建的一些定时…

什么是Rust语言?探索安全系统编程的未来

&#x1f680; 什么是Rust语言&#xff1f;探索安全系统编程的未来 文章目录 &#x1f680; 什么是Rust语言&#xff1f;探索安全系统编程的未来摘要引言正文&#x1f4d8; Rust语言简介&#x1f31f; 发展历程&#x1f3af; Rust的技术意义和优势&#x1f4e6; Rust解决的问题…

GlobalRouting - FastRoute代码框架和功能(三)

文章目录 一、 顶层代码框架和功能(一)、总结(二)、各文件代码的概述&#xff1a;1. FastRoute\\src\\Box.h2. FastRoute\\src\\Coordinate.h3. FastRoute\\src\\DBWrapper.h4. FastRoute\\src\\FastRouteKernel.h5. FastRoute\\src\\Grid.h成员变量成员函数 6. FastRoute\\src…

python零基础入门 (9)-- 模块与包

文章目录 前言1. 什么是模块&#xff1f;1.1 模块的定义和作用1.2 内置模块和第三方模块 2. 如何使用模块&#xff1f;2.1 导入模块2.2 使用模块中的函数和变量 3. 什么是包&#xff1f;3.1 包的定义和作用3.2 包的结构和组织方式 4. 如何创建自定义模块&#xff1f;4.1 创建一…

Conmi的正确答案——ESP32获取MAC地址

ESP-IDF版本&#xff1a;v5.2.1 ESP32芯片型号&#xff1a;ESP32C3&#xff08;4M flash版本&#xff09; ESP支持的MAC地址有&#xff1a; typedef enum {ESP_MAC_WIFI_STA, /**< MAC for WiFi Station (6 bytes) */ESP_MAC_WIFI_SOFTAP, /**< MAC for WiFi Sof…

电商技术揭秘三十:知识产权保护浅析

电商技术揭秘相关系列文章&#xff08;上&#xff09; 相关系列文章&#xff08;中&#xff09; 电商技术揭秘二十&#xff1a;能化供应链管理 电商技术揭秘二十一:智能仓储与物流优化(上) 电商技术揭秘二十二:智能仓储与物流优化(下) 电商技术揭秘二十三&#xff1a;智能…

REACT+PHP课程项目血泪史

PHP php??老师让用php写后端。什么&#xff1f;写惯了java、python。这个看起来像html标签语言的东西写后端是个什么鬼&#xff0c;看起来想落后几千年的原始语言&#xff08;手动滑稽&#xff09;。 大概介绍一下&#xff0c;php主要是后端语言&#xff0c;用来连接数据库…

Day17-Java基础之综合案例

练习一&#xff1a;飞机票 需求: 机票价格按照淡季旺季、头等舱和经济舱收费、输入机票原价、月份和头等舱或经济舱。 按照如下规则计算机票价格&#xff1a;旺季&#xff08;5-10月&#xff09;头等舱9折&#xff0c;经济舱8.5折&#xff0c;淡季&#xff08;11月到来年4月…

deepinV23 Beta3安装cuda

文章目录 下载CUDA安装,以cuda11.6为例运行.run文件安装选项配置环境变量查看cuda版本重启计算机 卸载cuda deepinV23 Beta3对应的debian版本是12&#xff1a; bookworm指的是debian12&#xff0c; sid代表不稳定版。 下载CUDA 官网&#xff1a;https://developer.nvidia.com…

你为什么会成为一名程序员?

在当今数字化时代&#xff0c;程序员这一职业越来越受到人们的关注和追捧。许多人选择成为一名程序员&#xff0c;不仅是因为这个职业的前景广阔&#xff0c;还因为他们对编程和技术的兴趣。那么&#xff0c;选择成为一名程序员的原因究竟是出于兴趣还是职业发展呢&#xff1f;…