简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

文章目录

    • 前言
    • Ref 响应式(基本数据类型)
    • Reactive 响应式(对象类型)
    • ref 对比 reactive

前言

重拾 Vue3,查缺补漏、巩固基础。

Ref 响应式(基本数据类型)

使用 ref 包裹,即可实现基本数据类型的响应式。

<template><div class="person"><h2>{{ name }}</h2><h2>{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts" setup>
import { ref } from "vue";
let name = ref("zhangsan");
let age = ref(18);
let tel = 18588888888;function changeName() {name.value = "zs";
}function changeAge() {age.value += 1;
}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 响应式(对象类型)

使用 reactive 包裹,即可实现基本数据类型的响应式。

<template><div class="person"><h2>{{ car.brand }}: {{ car.price }}w</h2><button @click="changePrice">修改价格</button><ul v-for="item in person" :key="item.id"><li>{{ item.name }}</li></ul><button @click="changeFirstName">修改第一个人的名字</button></div>
</template><script lang="ts" setup>
import { reactive } from "vue";let car = reactive({ brand: "大奔", price: 80 });
let person = reactive([{ id: 1, name: "zhangsan" },{ id: 2, name: "lisi" },{ id: 3, name: "zahuopu" },
]);function changePrice() {car.price += 10;
}function changeFirstName() {person[0].name = "hh";
}
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

ref 对比 reactive

ref 创建的变量必须使用 .value,reactive 重新分配一个新对象,会失去响应式(可以通过 Object.assign 去替换整体)。

使用 reactive 实现对象响应式。

<template><div class="person"><h2>{{ car.brand }}: {{ car.price }}w</h2><button @click="changeCarInfo">修改汽车信息</button></div>
</template><script lang="ts" setup>
import { reactive } from "vue";let car = reactive({ brand: "大奔", price: 80 });function changeCarInfo() {Object.assign(car, { brand: "小米", price: 29.98 });
}
</script>

使用 ref 实现对象的响应式。

<template><div class="person"><h2>{{ car.brand }}: {{ car.price }}w</h2><button @click="changeCarInfo">修改汽车信息</button></div>
</template><script lang="ts" setup>
import { ref } from "vue";let car = ref({ brand: "大奔", price: 80 });function changeCarInfo() {car.value = { brand: "小米", price: 29.98 };
}
</script>

参考资料:
https://www.bilibili.com/video/BV1Za4y1r7KE?spm_id_from=333.788.player.switch&vd_source=f839085517d2b7548b2939bfe214d466&p=16


在这里插入图片描述


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

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

相关文章

ZooKeeper 客户端API操作

文章目录 一、节点信息1、创建节点2、获取子节点并监听节点变化3、判断节点是否存在4、客户端向服务端写入数据写入请求直接发给 Leader 节点写入请求直接发给 follow 节点 二、服务器动态上下线监听1、监听过程2、代码 三、分布式锁1、什么是分布式锁?2、Curator 框架实现分布…

C++/list

目录 1.list的介绍 2.list的使用 2.1list的构造 2.2list iterator的使用 2.3list capacity 2.4list element access 2.5list modifers 2.6list的迭代器失效 3.list的模拟实现 4.list与vector的对比 欢迎 1.list的介绍 list的文档介绍 cplusplus.com/reference/list/li…

计算机图形学中向量相关知识chuizhi

一、向量加法 平行四边形法则 两个向量统一起点&#xff0c;构成平行四边形&#xff0c;对角线为向量加和的结果 三角形法则 两个向量尾首相连&#xff0c;从a起点连接到b终点&#xff0c;为向量加法的结果 多向量首尾相连的加法结果为第一个向量的起点到最后一个向量的终点…

私有化视频平台EasyCVR视频汇聚平台接入RTMP协议推流为何无法播放?

私有化视频平台EasyCVR视频汇聚平台兼容性强、支持灵活拓展&#xff0c;平台可提供视频远程监控、录像、存储与回放、视频转码、视频快照、告警、云台控制、语音对讲、平台级联等视频能力。 有用户反馈&#xff0c;项目现场使用RTMP协议接入EasyCVR平台&#xff0c;但是视频却不…

【教程】Git 标准工作流

目录 前言建仓&#xff0c;拉仓&#xff0c;关联仓库修改代码更新本地仓库&#xff0c;并解决冲突提交代码&#xff0c;合入代码其他常用 Git 工作流删除本地仓库和远程仓库中的文件日志打印commit 相关 前言 Git 是日常开发中常用的版本控制工具&#xff0c;配合代码托管仓库…

VMware workstation的3种网络类型

虚拟机想要和主机进行通信必须借助网桥或者交换机&#xff0c;VMware workstation提供了3种网络交换机&#xff1a;仅主机类型交换机、NAT类型交换机、桥接类型交换机。 介绍下这三种类型的交换机 仅主机类型 通过VMware workstation添加一个仅主机类型的虚拟交换机后&#…

【RAG】自动化RAG框架-“AutoML风”卷到了RAG?

AutoML&#xff08;自动机器学习&#xff09;是指通过自动化过程&#xff0c;简化机器学习模型的开发、训练和优化&#xff0c;使非专业用户也能有效地构建高性能模型。 今天分享的自动RAG框架&#xff0c;该框架能够自动识别给定数据集的合适RAG模块。自动RAG探索并近似数据集…

Qt/C++地图雷达扫描/动态扇形区域/标记线实时移动/轮船货轮动态轨迹/雷达模拟/跟随地图缩放

一、前言说明 地图雷达扫描的需求场景也不少&#xff0c;很多人的做法是直接搞个覆盖层widget&#xff0c;在widget上绘制雷达&#xff0c;优缺点很明显&#xff0c;优点是性能高&#xff0c;毕竟直接在widget上绘制性能明显比js中绘制要高&#xff0c;缺点是要么动态计算经纬…

CodeS:构建用于文本到 SQL 的开源语言模型

发布于&#xff1a;2024 年 10 月 29 日 #RAG #Text2 SQL #NL2 SQL 语言模型在将自然语言问题转换为 SQL 查询&#xff08;文本到 SQL &#xff09;的任务中显示出良好的性能。然而&#xff0c;大多数最先进的 &#xff08;SOTA&#xff09; 方法都依赖于强大但闭源的大型语言…

新一代Webshell管理器

工具介绍 游魂是一个开源的Webshell管理器&#xff0c;提供更为方便的界面和更为简单易用的功能&#xff0c;可配合或代替其他webshell管理器&#xff0c;帮助用户在各类渗透场景中控制目标机器。游魂不仅支持常见的一句话webshell以及常见Webshell管理器的功能&#xff0c;还…

SQL 常用语句

目录 我的测试环境 学习文档 进入数据库 基础通关测验 语句-- 查 展示数据库&#xff1b; 进入某个数据库&#xff1b; 展示表&#xff1a; 展示某个表 desc 查询整个表&#xff1a; 查询特定列&#xff1a; 范围查询 等于特定值 不等于 介于 特定字符查询 Li…

pycharm小游戏飞机射击

导入pygame模块 下载成功 图片略显粗糙 python 复制 import pygame import random # 初始化 pygame pygame.init() # 屏幕大小 SCREEN_WIDTH 800 SCREEN_HEIGHT 600 # 颜色 WHITE (255, 255, 255) BLACK (0, 0, 0) GREEN (0, 255, 0) RED (255, 0, 0) # 飞机速度 P…

ELK实现加载多个配置日志文件

服务器准备3台133为ELS存储服务器&#xff0c;135为Kibana前台显示收集服务器&#xff0c;136为logstash客户端 打开136logstash配置pipelines.yml文件path.config:配置模块 打开136的logstash.yml配置文件 在136服务器上查看logstash配置文件 需要将mysql_log.conf和nginx_log…

深入理解Redis的四种模式

Redis是一个内存数据存储系统&#xff0c;支持多种不同的部署模式。以下是Redis的四种主要部署模式。 1、单机模式 单机模式是最简单的部署模式&#xff0c;Redis将数据存储在单个节点上。这个节点包括一个Redis进程和一个持久化存储。单机模式非常适合小型应用程序或者开发和…

微服务设计模式 - 断路器模式 (Circuit Breaker Pattern)

微服务设计模式 - 断路器模式 (Circuit Breaker Pattern) 定义 断路器模式&#xff08;Circuit Breaker Pattern&#xff09;是云计算和微服务架构中的一种保护性设计模式&#xff0c;其目的是避免系统中的调用链出现故障时&#xff0c;导致系统瘫痪。通过断路器模式&#xff…

【react】基础知识点学习

1. 创建项目 npm install -g create-react-app npx create-react-app my-app cd my-app npm startindex.js为入口文件&#xff0c;App.js为根组件。 如何将react应用挂载在页面上&#xff1f; 将App组件渲染到id为root的DOM元素中 2. JSX JSX是|avaScript和XML(HTML)的缩写…

校园社团信息管理:Spring Boot技术的应用与挑战

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

LeetCode3226题. 使两个整数相等的位更改次数解法二(原创)

我之前文章LeetCode3226题. 使两个整数相等的位更改次数&#xff08;原创&#xff09;-CSDN博客对于LeetCode第3226题中给出了解法&#xff0c;后来思考了一下可以用位操作来完成更简洁优雅的实现&#xff1a; 首先计算n和k的异或值m.m中的所有位数中为1的值就是n中为1k中为0&…

Linux:权限的深度解析(进阶)

文章目录 前言一、知识点1. 只有权限的拥有者或root&#xff0c;有权修改自己的权限2. Linux一个文件可执行 这个文件真的能执行 可执行权限3. 身份对比的时候&#xff0c;只依次在user, group, other中比对一次4. 权限的八进制表示与修改&#x1f929;&#x1f929;&#x1…

网络编程(Day35)

一、学习内容 ip地址的网络字节序转换 函数原型 in_addr_t inet_addr(const char *cp); 返回值 in_addr_t&#xff1a;一个 uint32 数据&#xff0c;该数据是结构体struct in_addr {in_addr_t s_addr;};struct in_addr 是结构体 struct sockaddr_in 中的一个数据 参数描述 参…