Vue3之ref与reactive的基本使用

ref可以创建基本类型、对象类型的响应式数据
reactive只可以创建对象类型的响应式数据

接下来让我为大家介绍一下吧!

在Vue3中,我们想让数据变成响应式数据,我们需要借助到ref与reactive

先为大家介绍一下ref如何使用还有什么注意点
我们需要导入ref,利用对象结构的办法

<template>
    <div>sum的值为:{{ sum }}</div>
    <button @click="add">sum+1</button>
    <div>姓名:{{ obj.name }}</div>
    <button @click="changeName">修改姓名为李四</button>
</template>

<script setup lang="ts" name="Person">
import { ref } from 'vue';
// 我们需要用ref()的形式去定义需要响应式的数据
let sum = ref(1)
function add() {
    // 注意点,我们需要用到 sum.value才可以获取到值
    sum.value += 1
}
// 我们也可以用在对象上
const obj = ref({
    name: "张三"
})
function changeName() {
    // 对象我们需要使用到obj.value才可以修改数据
    obj.value.name = "李四"
}
</script>
<style scoped></style>

请添加图片描述

为大家介绍一下reactive的基本使用与注意事项吧!

<template>
    <div>姓名:{{ obj.name }}</div>
    <button @click="changeName">修改姓名为李四</button>
</template>

<script setup lang="ts" name="Person">
import { reactive } from 'vue';
// 我们也可以用在对象上
const obj = reactive({
    name: "张三"
})
// reactive就不像ref一样,不需要使用到.value
function changeName() {
    // 修改姓名 直接obj.name
    // obj.name = "李四"
    // 我们也可以使用到Object.assign 这是我们想把对象整体改掉时写的
    Object.assign(obj, { name: "李四" })
}
</script>
<style scoped></style>

请添加图片描述

使用规则:
若需要一个基本类型的响应式数据,必须用ref
若需要一个响应式对象,层级不深,ref、reactive 都可以
若需要一个响应式对象,且层级较深,推荐使用reactive

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch:使用 ELSER v2 进行语义搜索

在我之前的文章 “Elasticsearch&#xff1a;使用 ELSER 进行语义搜索”&#xff0c;我们展示了如何使用 ELESR v1 来进行语义搜索。在使用 ELSER 之前&#xff0c;我们必须注意的是&#xff1a; 重要&#xff1a;虽然 ELSER V2 已正式发布&#xff0c;但 ELSER V1 仍处于 [预览…

政安晨:【示例演绎机器学习】(二)—— 神经网络的二分类问题示例 (影评分类)

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 政安晨的机器学习笔记 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让小伙伴们一起学习、交流进步&#xff01; 作者对人工智能…

BTC系列-系统学习铭文(一)-比特币上的NFT

Ordinals协议概况 开源项目: https://github.com/ordinals/ord铭文浏览器: https://Ordinals.com关于Ordinals的BIP: https://github.com/ordinals/ord/blob/master/bip.mediawiki序数理论手册: https://docs.ordinals.com/overview.html 所需的技术积累 Ordinals NFTs 是基…

SQL注入:网鼎杯2018-unfinish

目录 使用dirmap扫描 使用dirsearch扫描 使用acunetix扫描 爆破后端过滤的字符 绕过限制获取数据 这次的进行SQL注入的靶机是&#xff1a;BUUCTF在线评测 进入到主页面后发现是可以进行登录的&#xff0c;那么我们作为一个安全人员&#xff0c;那肯定不会按照常规的方式来…

达梦数据库--DM8两节点DSC集群安装部署(达梦数据库DSC集群搭建)

1 前期规划 系统规划 本地磁盘规划 共享存储规划 DMDSC 集群为了实现多实例同时访问和修改数据&#xff0c;需要数据文件、控制文件和日志文件都放到共享存储上。DM 支持两种共享存储&#xff0c;裸设备和 DMASM&#xff0c;裸设备是未经过格式化的特殊字符设备&#xff0c;…

【MATLAB】 MODWT信号分解+FFT傅里叶频谱变换组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 展示出图效果 1 MODWT分解算法 MODWT分解算法是一种基于小波变换的信号分解算法&#xff0c;与EWT分解算法类似&#xff0c;它也可以将信号分解为一系列具有不同频率特性的小波分量。但是&#xff0c;MODWT分解算法在小…

2.21学习总结

1.【模板】ST 表 2.Balanced Lineup G 3.景区导游 4.最近公共祖先&#xff08;LCA&#xff09; 倍增思想&#xff1a;主要用于LCA问题&#xff0c;RMQ问题。在进行 递推 时&#xff0c;如果 状态空间很大&#xff0c;通常的 线性递推 无法满足 时间 与 空间复杂度 的要求&…

Web基础②nginx搭建与配置

目录 一.Nginx概述 1.定义 2.Nginx模块作用 &#xff08;1&#xff09;main模块 &#xff08;2&#xff09;stream服务模块 &#xff08;3&#xff09;邮件服务模块 &#xff08;4&#xff09;第三方模块 &#xff08;5&#xff09;events模块 &#xff08;6&#xff…

程序媛的mac修炼手册-- 如何彻底卸载Python

啊&#xff0c;前段时间因为想尝试chatgpt的API&#xff0c;需要先创建一个python虚拟环境来安装OpenAI Python library. 结果&#xff0c;不出意外的出意外了&#xff0c;安装好OpenAI Python library后&#xff0c;因为身份认证问题&#xff0c;根本就没有获取API key的权限…

Redis之缓存穿透问题解决方案实践SpringBoot3+Docker

文章目录 一、介绍二、方案介绍三、Redis Docker部署四、SpringBoot3 Base代码1. 依赖配置2. 基本代码 五、缓存优化代码1. 校验机制2. 布隆过滤器3. 逻辑优化 一、介绍 当一种请求&#xff0c;总是能越过缓存&#xff0c;调用数据库&#xff0c;就是缓存穿透。 比如当请求一…

新版Java面试专题视频教程——多线程篇②

新版Java面试专题视频教程——多线程篇② 0. 问题汇总0.1 线程的基础知识0.2 线程中并发安全0.3 线程池0.4 使用场景 1.线程的基础知识2.线程中并发锁3.线程池3.1 说一下线程池的核心参数&#xff08;线程池的执行原理知道嘛&#xff09;3.2 线程池中有哪些常见的阻塞队列Array…

Java Web演化史:从Servlet到SpringBoot的技术进程及未来趋势

引言 在快速演进的IT世界里&#xff0c;Java Web开发始终屹立不倒&#xff0c;它不仅承担着历史的厚重&#xff0c;也始终面向未来。 自诞生之日起&#xff0c;Java Web技术就在不断地进化&#xff0c;以适应不同时代的需求。 本文将回顾Java Web开发的重要里程碑&#xff0c;…

django rest framework 学习笔记-实战商城2

01收货地址模型类和视图定义_哔哩哔哩_bilibili 本博客借鉴至大佬的视频学习笔记 地址信息的管理&#xff1a;增删改查的实现 # 序列化器配置 class AddrSerializer(serializers.ModelSerializer):"""收货地址的模型序列化器"""class Meta:mo…

喀秋莎画中画怎么设置 喀秋莎画中画视频怎么导出 喀秋莎什么意思 camtasia studio下载

画中画视频&#xff0c;顾名思义&#xff0c;就是在一个视频中有两个画面&#xff0c;游戏解说、微课等类型的视频常常就以画中画的形式出现。作为一款专业的视频编辑软件&#xff0c;使用camtasia可以轻松地制作画中画视频并导出。接下来我将为大家介绍&#xff1a;喀秋莎画中…

HEVC视频编解码标准学习笔记-1

视频编解码标准H.265/HEVC&#xff08;High Efficiency Video Coding&#xff09;通过将视频数据编码为更高效格式&#xff0c;大幅改善了视频流的压缩效率。这里主要介绍Tile、Slice和CTU的定义&#xff0c;以及介绍这些技术组件之间的相互关系。 CTU&#xff08;编码树单元&…

Chrome插件精选 — 缓存清理

Chrome实现同一功能的插件往往有多款产品&#xff0c;逐一去安装试用耗时又费力&#xff0c;在此为某一类型插件挑选出比较好用的一款或几款&#xff0c;尽量满足界面精致、功能齐全、设置选项丰富的使用要求&#xff0c;便于节省一个个去尝试的时间和精力。 1. Chrome清理大师…

基于深度学习的红肉新鲜过期判决系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 系统构成与流程 4.2 模型训练与优化 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ...............................................…

phar反序列化原理及利用

phar是什么&#xff1f; phar 是 PHP 的一种归档文件格式&#xff0c;类似于 ZIP 或 TAR 文件&#xff0c;它可以包含多个文件和目录&#xff0c;并且可以像访问普通文件系统一样在 PHP 中进行访问。在php 5.3 或更高版本中默认开启 在php.ini中配置如下时&#xff0c;才能生成…

线性代数:线性方程组解的结构

目录 齐次/非齐次方程组的解 Ax 0 的解的性质 定理 Ax b 的解的性质 相关证明 例1 例2 例3 齐次/非齐次方程组的解 Ax 0 的解的性质 定理 Ax b 的解的性质 相关证明 例1 例2 例3

docker容器常见操作

目录 一、认识容器 1.1、docker用到的内核技术 1.2、namespace 1.3、Control Group 1.4、LXC与docker区别 二、docker环境准备 2.1、安装docker 2.2、docker daemon环境管理 三、镜像、容器和仓库 3.1、镜像常见操作 3.2、配置镜像加速器 命名空间 3.3、非官方镜像仓…