Vue3-03-reactive() 响应式基本使用

reactive() 的简介

reactive() 是vue3 中进行响应式状态声明的另一种方式;
但是,它只能声明 【对象类型】的响应式变量,【不支持声明基本数据类型】。reactive() 与 ref() 一样,都是深度响应式的,即对象嵌套属性发生了改变,页面中都会重新刷新。reactive() 声明的对象变量,可以直接使用它的属性值,无需像 ref() 一样使用 [.value] 的方式读取变量的值。reactive()  函数返回的是对象的一个代理对象,这个代理对象可以直接操作属性,且这个代理对象是唯一的,
即 同一个对象 多次调用 reactive() 函数,返回的是同一个代理对象。reactive() 对象解构之后的属性,不具有响应式。reactive() 对象的值单独传入函数中作为参数时,不具有响应式。

基本使用案例

<template><div>stu: {{ stu }}<br>numList : {{ numList }}</div>
</template><script setup lang="ts">// 引入 reactiveimport {reactive} from "vue"// 声明响应式状态 : 必须是一个对象类型const stu = reactive({id:'001',name:'小明',classInfo:{classId:1001,className:'开心一班',}})const numList = reactive([1,2,3,4])// 打印一下 响应式的变量,直接打印,无需使用 【.value】 进行值的获取console.log('stu : ',stu)console.log('numList : ',numList)</script><style scoped>
</style>

在这里插入图片描述

reactive() 添加数据类型限制

官方提示 :不推荐 给 reactive() 使用泛型的方式进行类型限制!

方式一 : 自动类型推导

这也是ts的自有特性,因为 reactive() 是封装对象的,所以,自动类型推导也会推导为一个对象类型。
	// 会自动推导为 {name:string} 类型const job = reactive({name:'程序员'})console.log('job',job)

在这里插入图片描述

方式二 :显示的标注类型

如果想给reactive() 添加类型,笔者比较推荐这种方式,
这样程序代码比较清晰,可维护性更高。可以通过自己定义 接口的方式,进行类型的标注。
这个就纯纯的是ts的知识点了。
    // 声明一个接口,作为数据类型规范interface Job{name:string}// 显式的指定变量的类型const job : Job = reactive({name:'程序员'})console.log('job',job)

在这里插入图片描述

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

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

相关文章

flutter ‘Gradle Libs‘ was added by build file ‘app/build.gradle‘

相关问题解释文章 How to prefer settings.gradle repositories over build.gradle repositoriesMode 解释 问题描述 此问题是&#xff0c;直接创建的flutter项目&#xff0c;需要配置其他的maven仓库地址&#xff0c;和第三方module&#xff0c;结果始终都是无法成功 错误…

树莓派新手装机指南

如果你决定买一个树莓派&#xff0c;那么你一定已经了解过&#xff0c;不需要再做多余的介绍&#xff0c;由于之前就玩过树莓派&#xff0c;还是想弄一个属于自己的树莓派&#xff0c;因为它就像一个微型电脑&#xff0c;耗电非常低&#xff0c;我可以在家里24小时开机&#xf…

【Apache Pinot】Data upload jobtype 粗略分析

背景 目前我司大部分实时数据和离线数据都存储在 pinot 数据库中&#xff0c;离线数据需要通过脚本去生成对应的数据上传到数据库里面&#xff0c;但是其中 config 中有个 jobtype 让人有点迷惑&#xff0c;本文简单的做一个概念的整理 用处 先说一下流程&#xff0c;目前我…

数据结构总结(栈 队列)

概念 数据结构就是研究数据的逻辑结构和物理结构以及它们之间相互关系&#xff0c;并对这种结构定义相应的运算&#xff0c;而且确保经过这些运算后所得到的新结构仍然是原来的结构类型。 1.数据&#xff1a;所有能被输入到计算机中&#xff0c;且能被计算机处理的符号的集合。…

HarmonyOS首次尝试-HelloWorld

我的旧手机是个HUAWEI PCT-AL10 HarmonyOS 3.0.0(Android 10) 插上后&#xff0c;studio能显示连接上了手机设备&#xff0c;创建的demo使用的是API9&#xff0c;也就是当前的最新版本。 点击运行报错&#xff1a; 点击去往帮助页&#xff0c;做的也挺好&#xff0c;有直达的…

Java StringBuffer 和 StringBuilder 类

标题&#xff1a;Java StringBuffer 和 StringBuilder 类的比较与使用 摘要&#xff1a;Java中的String类是不可变类&#xff0c;对字符串的拼接、修改等操作需要创建新的字符串对象&#xff0c;这会导致性能低下。为了解决这个问题&#xff0c;Java提供了StringBuffer和Strin…

取火柴游戏

甲、乙两人玩抽取火柴的游戏&#xff0c;一共有21根火柴。两个人轮流取火柴&#xff0c;每人每次最少取1根火柴&#xff0c;最多可以取4根火柴&#xff0c;不可多取&#xff0c;也不能不取&#xff0c;谁取到最后一根火柴谁就输了。甲让乙先取火柴&#xff0c;结果每次都是甲获…

Docker笔记:容器转换成镜像,导出导入镜像,数据拷贝,查看日志

docker commit 将容器转换成镜像 可以把容器转换成镜像镜像没有写入权限&#xff0c;但可以通过修改容器把容器制作成新镜像启动容器后&#xff0c;就给容器提供了一个可写层&#xff0c; 在容器里&#xff0c;可安装软件&#xff0c;可创建文件 …转换成镜像&#xff0c;之后…

Redis第1讲——入门简介

Java并发编程的总结和学习算是告一段落了&#xff0c;这段时间思来想去&#xff0c;还是决定把Redis再巩固和学习一下。毕竟Redis不论是在面试还是实际应用中都是极其重要的&#xff0c;在面试中诸如Redis的缓存问题、热key、大key、过期策略、持久化机制等&#xff1b;还有在实…

数据冗余(data redundant)现象介绍

文章目录 数据冗余现象引言1. 数据冗余现象的定义2. 数据冗余的影响2.1 存储空间的浪费2.2 数据管理复杂性增加2.3 数据一致性问题 3. 解决数据冗余的技术策略3.1 数据规范化3.2 使用数据库管理系统(DBMS&#xff1a;database manager manager system)3.3 数据去重技术 4. 结论…

最新UI酒桌喝酒游戏小程序源码,直接上传源码到开发者端即可,带流量主

源码介绍&#xff1a; 2023最新UI酒桌喝酒游戏小程序源码 娱乐小程序源码 带流量主.修改增加了广告位&#xff0c;直接上传源码到开发者端即可。 通过后改广告代码&#xff0c;然后关闭广告展示提交&#xff0c;通过后打开即可。无广告引流。 流量主版本的&#xff08;配合流…

深度解读 Cascades 查询优化器

数据库中查询优化器是数据库的核心组件&#xff0c;其决定着 SQL 查询的性能。Cascades 优化器是 Goetz 在 volcano optimizer generator 的基础上优化之后诞生的一个搜索框架。 本期技术贴将带大家了解 Cascades 查询优化器。首先介绍 SQL 查询优化器&#xff0c;接着分析查询…

CentOS 7 源码部署 Nginx

文章目录 1. 概述2. 部署示例2.1 下载和解压 Nginx 源码2.2 安装编译依赖包2.3 编译和安装2.4 启动 Nginx2.5 配置防火墙2.6 设置 Nginx 为系统服务2.7 配置访问 3. 扩展知识 1. 概述 Nginx 是一款高性能的开源 Web 服务器软件&#xff0c;广泛应用于互联网领域。本篇博客将介…

Text mining and natural language processing in construction 论文阅读

摘要 文本挖掘 ™ 和自然语言处理 (NLP) 引起了建筑领域的兴趣&#xff0c;因为它们提供了管理和分析基于文本的信息的增强功能。这凸显了需要从施工管理的角度进行系统审查&#xff0c;以确定现状、差距和未来方向。通过将 205 份出版物的目标与施工管理实践中概述的具体领域…

【日积月累】Spring中的AOP与IOC相关问题详解

Spring中的AOP与IOC 1.前言2.Spring AOP&#xff08;面向切面编程&#xff09;2.1 AOP的实现过程2.2 AOP代理模式的类型2.2.1JDK的动态代理2.2.2CGLIB的动态代理 2.3AOP应用常见场景2.3.1日志记录 2.4对AOP的理解 3.Spring IOC&#xff08;Inversion of Control&#xff0c;控…

29、Windows安全配置

文章目录 一、Windows安全配置简介二、账户策略2.1 密码策略2.2 账户锁定策略 三、本地策略3.1 用户权限分配 四、安全设置4.1 账户4.2 审核4.3 设备4.4交互式登录4.5 网络访问4.6 网络安全4.7 用户账户控制4.8 防火墙配置 五、高级审核策略设置5.1 账户登录5.2 账户管理5.3 对…

架构设计系列之基础:基础理论(一)

在软件开发和软件架构领域&#xff0c;深厚的理论基础是构建高质量、可维护、可扩展系统的关键&#xff0c;本部分内容将围绕这些基础理论展开。&#xff08;本部分内容介绍第一部分&#xff1a;编程三范式、架构设计原则、软件设计七原则&#xff09; 一、编程三范式 编程范…

人工智能技术在宽域飞行器控制中的应用

近年来&#xff0c;以空天飞行器、高超声速飞行器等 ̈1 为典型代表的宽域飞行器蓬勃发展&#xff0c;如图1所示&#xff0c;其 不仅对高端装备制造、空间信息以及太空经济等领 域产生辐射带动作用&#xff0c;进一步提升了中国在航空航 天领域的自主创新能力&#xff0c;同时也…

112. 路径总和(Java)

目录 解法&#xff1a; 官方解法&#xff1a; 方法一&#xff1a;广度优先搜索 思路及算法 复杂度分析 时间复杂度&#xff1a; 空间复杂度&#xff1a; 方法二&#xff1a;递归 思路及算法 复杂度分析 时间复杂度&#xff1a; 空间复杂度&#xff1a; 给你二叉树的…

(C++)最大连续1的个数--滑动窗口

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能&#xff0c;轻松拿下世界 IT 名企 Dream Offer。https://le…