Vue3之ref与reactive的基本使用

news2024/11/18 8:45:44

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

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

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

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

相关文章

【快速搞定Webpack5】处理样式资源(三)

本次内容我们将学习使用webpack如何处理css、less、sass、scss等样式资源 介绍 webpack本身是不能识别样式资源的&#xff0c;所以我们需要借助loader包来帮助webpack解析样式资源 我们找loader都应该去官方文档中查找对应的loader&#xff0c;然后学习使用。 官方文档找不到…

windows server设置桌面显示此电脑

我开发的chatgpt网站&#xff1a; https://chat.xutongbao.top

Sora - 探索AI视频模型的无限可能-官方报告解读与思考

一、引言 最近SORA火爆刷屏&#xff0c;我也忍不住找来官方报告分析了一下&#xff0c;本文将深入探讨OpenAI最新发布的Sora模型。Sora模型不仅仅是一个视频生成器&#xff0c;它代表了一种全新的数据驱动物理引擎&#xff0c;能够在虚拟世界中模拟现实世界的复杂现象。本文将重…

内网穿透——NPS突然无法连接

温馨提示 &#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;❤️❤️❤️❤️❤️❤️❤️&#x1f968;&#x1f968;&#x1f9…

JavaSprintBoot中一些运维方面的知识

1.配置文件四级分类 例如以下yml配置文件&#xff0c;权限一共有四级&#xff0c;高等级覆盖低等级并叠加&#xff08;权限向下兼容&#xff09; 2.自定义配置文件 可以自定义配置文件的名称&#xff0c;因为实际开发环境中可能不会就简单的叫做application.yml之类的&#x…

《穿越科技的前沿:计算机专业必看的电影盛宴》

文章目录 每日一句正能量前言电影推荐推荐一&#xff1a;《黑客帝国》推荐二&#xff1a;《社交网络》推荐三&#xff1a;《源代码》推荐四&#xff1a;《谍影重重》系列推荐五&#xff1a;《旋转木马》 技术与主题后记 每日一句正能量 一个人的一生&#xff0c;就是一座有了年…

【Linux】MySQL数据库的使用

【Linux】MySQL数据库的使用 一、访问MySQL数据库二、创建及删除库和表1、创建新的库2、创建新的表3、删除一个数据表4、删除一个数据库 三、管理表中的数据记录1、插入数据记录2、查询数据记录3、修改数据记录4、删除数据记录 四、数据库用户授权1、授予权限2、查看权限3、撤销…

每日OJ题_二叉树dfs④_力扣98. 验证二叉搜索树

目录 力扣98. 验证二叉搜索树 解析代码 力扣98. 验证二叉搜索树 98. 验证二叉搜索树 难度 中等 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树…

仿12306校招项目-项目业务和架构

目录 业务图 用户管理 业务难点 1. 如何确定用户注册信息的真实性 2. 面对亿级用户量 3. 支持多种登录方式会造成读请求扩散&#xff0c;需要解决用户定位问题 4. 高并发场景下缓存穿透问题需要有效解决&#xff0c;避免数据库压力过大 5. 明文存储用户敏感信息会造成安…

深度学习基础——SSD目标检测

SSD网络介绍 使用多个特征图作为特征预测层。 SSD (Single Shot MultiBox Detector)于2016年提出。当网络输入为300300大小时&#xff0c;在VOC2007测试集上达到74.3%的mAP;当输入是512512大小时&#xff0c;达到了76.9%的mAP SSD_Backbone部分介绍 不变的部分 特征提取网…

H5移动端文件预览pdf

H5移动端文件预览pdf 需求&#xff1a;H5页面嵌入浙政钉&#xff0c;需要文件预览Pdf。 试用了多个插件&#xff0c;踩了很多坑&#xff0c;如果小伙伴有类似填坑经历&#xff0c;并成功解决&#xff0c;感谢留言指点&#xff01;&#xff01;&#xff01; 先讲最终方案&#x…

C++从入门到精通 第十三章(认识STL)

写在前面&#xff1a; 本系列专栏主要介绍C的相关知识&#xff0c;思路以下面的参考链接教程为主&#xff0c;大部分笔记也出自该教程&#xff0c;笔者的原创部分主要在示例代码的注释部分。除了参考下面的链接教程以外&#xff0c;笔者还参考了其它的一些C教材&#xff08;比…

做过的卷子如何转换成空白卷子?3种还原方法分享

做过的卷子如何转换成空白卷子&#xff1f;在日常学习中&#xff0c;将做过的卷子转换成空白卷子具有极大的实用性。通过使用扫描工具&#xff0c;可以迅速将已完成的卷子恢复成空白状态&#xff0c;为后续的复习或练习提供便利。这种转换不仅省去了重新寻找或制作新卷子的麻烦…

Javascript中var和let之间的区别

文章目录 一.变量提升(声)二.let和var的区别 区别&#xff1a; 1、var有变量提升&#xff0c;而let没有&#xff1b; 2、let不允许在相同的作用域下重复声明&#xff0c;而var允许&#xff1b; 3、let没有暂时性死区问题&#xff1b; 4、let创建的全局变量没有给window设置对应…

腾讯云宝塔Linux安装Mysql5.7

一、下载官方mysql包 wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm二、安装mysql包 rpm -ivh mysql-community-release-el7-5.noarch.rpm三、安装mysql yum install mysql-community-server -y四、启动数据库 systemctl start mysqld.service…

2023 re:Invent 用 PartyRock 10 分钟构建你的 AI 应用

前言 一年一度的亚马逊云科技的 re:Invent 可谓是全球云计算、科技圈的狂欢&#xff0c;每次都能带来一些最前沿的方向标&#xff0c;这次也不例外。在看完一些 keynote 和介绍之后&#xff0c;我也去亲自体验了一些最近发布的内容。其中让我感受最深刻的无疑是 PartyRock 了。…

无人机的视频图传技术

在操控无人机时&#xff0c;视频图传技术显得尤为关键。通过这项技术&#xff0c;无人机的摄像头所捕捉的画面能实时回传至遥控器&#xff0c;使操作者全面掌握无人机的拍摄情况。同时&#xff0c;无人机图传技术也是衡量无人机性能的重要标准&#xff0c;它关乎飞行距离与时间…

Python format函数

在Python编程中&#xff0c;format()函数是一个非常重要且常用的字符串格式化方法&#xff0c;用于将各种数据类型插入到字符串中&#xff0c;并指定其格式。这个函数可以动态地生成各种格式的字符串&#xff0c;包括文本、数字、日期等。本文将深入探讨Python中的format()函数…

openAI:人工智能领域的领军者

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、openAI创始人二、openAI的发展历程三、openAI的股权架构四、Sam Altman的离开 一、openAI创始人 openAI由埃隆马斯克、Sam Altman、Greg Brockman三位创始人于…

【智能车入门:pcb版】(蓝牙遥控、超声波避障、红外循迹)

实现最简单的蓝牙遥控、超声波避障、红外循迹&#xff09; 总览项目获取 本篇是对 上一篇博客的改进&#xff0c;上一篇博客使用面包板&#xff0c;看起来很乱&#xff0c;春节结束之后嘉立创免费打板恢复&#xff0c;板子到了之后进行焊接测试&#xff0c;相较于使用面包板&a…