vue3（笔记）

已于 2024-05-24 18:08:54 修改
阅读量560 收藏 5
点赞数 10
文章标签： 笔记
于 2024-02-06 10:32:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gw616/article/details/128792629
版权
本文介绍了Vue3中组合式API的新特性，如setup生命周期钩子，reactive用于定义状态对象，以及如何使用Pinia进行状态管理和组件间通信，包括父传子、自定义事件与mitt库的应用。同时提到了toRefs和对TypeScript的支持。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

组合式Api

setup-----相当于beforeCreate, create生命周期在这里插入图片描述

在这里插入图片描述

reactive–定义状态 对象形式

在这里插入图片描述

响应式原理

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

组件通信

在这里插入图片描述

1，父传子,
2，自定义事件：defineEmits(["])
3，mitt

toRefs—

Pinia

（只有state、getters和actions）
更加简洁的语法，完美支持Vue3的Composition api 和 对TypesCcript的完美支持

友人！
关注
Vue2+Vue3笔记（黑马程序员+尚硅谷）
05-26
学习Vue2+Vue3笔记可以帮助开发者全面掌握Vue.js的两种主要版本，理解它们的异同，以及如何在实际项目中选择合适的版本。黑马程序员和尚硅谷是知名的在线教育平台，它们提供的笔记内容通常覆盖了基础概念、实战案例...
Vue3笔记 尚硅谷张天禹
03-07
Vue3笔记尚硅谷张天禹 markdown格式
SpringBoot3+Vue3笔记
07-03
SpringBoot3+Vue3笔记
VUE3笔记 VUE3 VUE
01-02
Vue3 是一款流行的前端JavaScript框架，由尤雨溪开发，用于构建用户界面。Vue3相较于Vue2有许多重大的改进和优化，旨在提供更好的性能、更简单的API以及更强的可扩展性。以下是一些关于Vue3的关键知识点： 1. **...
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
软件测试笔记(上)
qq_65501197的博客
04-10 939
软件测试就是查找软件中的缺陷，日常生活中的各样的软件都会出现不同的缺陷，比如页面打不开、500 错误、白屏、崩溃、闪退等等。这些缺陷小到影响用户体验感，比如刷新页面三秒钟后才出现数据，体验感知非常不好；中到影响功能不能使用，比如软件某一个功能点击完后没反应或直接报错；大到影响财产和生命，像之前某电商出现过薅羊毛事件，一晚上损失几百万，还有波音 737 飞机起飞几秒钟后掉落，最后查明原因是因为软件传感器数据有误，导致机毁人亡的悲剧。
latex笔记
houliabc的博客
04-09 2482
方法1：直接用latex自带的texworks上写方法2：安装好latex后，配置vscode。
oracle json笔记
enthan809882的博客
04-08 632
oracle json笔记
蓝桥杯备赛学习笔记：高频考点与真题预测（C++/Java/python版）
Magnolia_He的博客
04-09 3110
通过对第13-15届蓝桥杯真题的分析，可以发现题目主要围绕。：如果数组是环形的（首尾相连），如何计算？：实现BST的插入和删除操作。祝大家备赛顺利，冲击省一！，找到和最大的连续子数组。展开，且近年逐渐增加。，返回最长回文子串。
考研单词笔记 2025.04.09
a16675900046的博客
04-09 406
measure n尺度，标准，判断，衡量，措施，方法，议案，法案v测量，度量，估量，衡量。conduct v表现，组织，安排，实施，指挥，带领，引导，传导n行为，举止，组织方式。issue v发给，供给，宣布，公布，发行，出版，发表n问题，议题，期，号，版次。decline v谢绝，婉言拒绝，减少，下降，衰落，衰退n减少，下降，衰落，衰退。act v表现，行动，做事，扮演，充当，担任，起作用n行为，行动，法案，法令。extend v提供，给予，表示，延伸，扩展，延长，使延期，包括，适用于。
HTML5的笔记
最新发布
liangmeirong123的博客
04-11 806
1. HTML的概念2. 标签语法3. 标签4. 路径5. 字符实体
4月9日笔记
2301_76364470的博客
04-09 526
目前我和女友的相处模式就是因为异地，加上她上学，就是周末聊聊天，放假的时候约会，平时分享一下日常，在生活中的时间交集较小。我是一个比较自信的人，虽然有时候会感觉羡慕他人的物质条件，羡慕他们的大脑，但是实际上我也是一个很强的人。），我的身高在男生里面算top级别的。我长得也不丑，我活得也还算开心，感情状况也很好，有一个很爱我的女朋友，有爱我的爸爸妈妈爷爷奶奶姥姥。主要是说在恋爱中 女生觉得男生幼稚，让男生去做一些自己的事，但是当男生真的开始做自己的事之后女生又开始找男生，说想让他来接自己，说男生变了。
MySQL学习笔记十二
Acxymy的博客
04-09 419
说明：这种写法是上面的合并，将第一次查询得到的结果作为第二次查询的过滤条件，即可以把一条SELECT语句的返回结果用于另一条SELECT语句的WHERE子句。说明：这里的子查询是对每个客户都使用了一次。这种子查询被称为相关子查询，即涉及外部的子查询。说明：在不完全限定列名时，子查询中实际上进行的过滤是orders表中的cust_id列的自身比较，返回的也总是orders表中的订单总数。说明：1.这三个SELECT语句仍然可以叠加，第一次的查询是第二次的过滤条件，两者嵌套而成的查询又是第三次查询的过滤条件。
Linux学习笔记——Linux内核镜像格式概述
zxjiaya的博客
04-10 496
Linux 内核镜像格式包括 vmlinux、vmlinuz、Image、zImage、uImage 和 u-boot 等。vmlinux 是未压缩的 ELF 文件，适合调试；vmlinuz 是压缩版的 vmlinux，常用于 PC 系统；Image 是未压缩的标准内核镜像；zImage 是压缩的内核镜像，带自解压器；uImage 是带头信息的压缩内核镜像，供 U-Boot 使用；u-boot 和 u-boot.bin 是 Bootloader 镜像，分别为 ELF 和二进制格式，前者用于调试，后者用于烧录
学习笔记（C++篇）--- Day1
2406_83392683的博客
04-08 492
引用必须初始化一个变量可以有多个别名引用一旦引用一个实体，再不能引用其他实体注意： 引用不能替代指针，引用不能改变指向。（实质就是取别名）
软考笔记9——数据库技术基础
qq_60972641的博客
04-07 799
MySQL数据库总结SQL是结构化查询语言的简称，是关系数据库中最普遍使用的语言，包括数据查询、数据操纵、数据定义和数据控制，是一种通用的、功能强大的关系数据库标准语言。SQL语言支持关系数据库的三级模式。基本表和视图都是表，基本表是存储在数据库中的表，而视图是虚表，是从基本表或其他视图导出的表。数据库中只存放视图的定义，不存放视图的数据。.用户可用SOL语言对视图或表进行查询等操作。SQL的数据定义包括对表、视图、索引的创建和删除，属于数据库定义语言（DDL)。
MyBatis的第四天学习笔记
m0_73446768的博客
04-08 586
MVC是一种软件架构模式，将应用程序分为三个核心组件：模型(Model)、视图(View)和控制器(Controller)。模型(Model)：负责数据逻辑和业务逻辑，包括数据访问层(DAO)和业务逻辑层(Service)视图(View)：负责界面显示，将模型数据呈现给用户控制器(Controller)：负责接收用户请求，调用模型处理请求，并选择合适的视图进行响应表现层(Controller)：接收请求，调用Service层业务逻辑层(Service)：处理业务逻辑，调用DAO层，管理事务。
MySQL学习笔记八
Acxymy的博客
04-08 427
储存在表中的数据可能不是应用程序所需要的，需要从数据库中检索出转换、计算或格式化的数据。计算字段承担的便是这项工作，计算字段并不实际存在与数据表中，而是在运行SELECT语句内创建的。说明：删除数据右侧空格可以使用RTRIM()函数，删除数据左侧空格可以使用LTRIM()函数，删除数据两侧空格可以使用TRIM()函数。说明：根据物品单价汇总物品的价格（单价乘以订购数量）。MySQL支持的基本运算符有加（+）、减（-）、乘（*）、除（/）。说明：别名是一个字段或值的替换名，别名用AS关键字赋予。
【STM32】最后一刷-江科大Flash闪存-学习笔记
2301_81011494的博客
03-31 2427
最详细的FLASH闪存使用方法。其实就是，在主函数对SRAM数组Store_Data进行修改，然后在放到闪存，防止SRAM掉电丢失，然后在上电初始化的时候在把闪存的数据再读取到SRAMStore_Data数组，实现SRAM掉电不丢失
黑马程序员vue3笔记
01-07
### 黑马程序员 Vue3 学习笔记 #### 一、Vue3 基础概念介绍 Vue.js 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。核心库只关注视图层，方便与第三方库或现有项目整合[^1]。 #### 二、ES6 模块化基础 为了更好地理解如何组织代码，在深入研究 Vue3 的特性之前了解 ES6 模块化的基础知识是非常有帮助的。按照 ES6 模块化规范中的定义，每个 JavaScript 文件都被视为一个独立的模块。通过 `import` 关键字可以从其他文件引入功能；而 `export` 则用来向外部暴露当前文件的功能[^2]。 ```javascript // 导入单个成员 import { member } from 'module-name'; // 导出默认成员 export default function () {}; ``` #### 三、Vue3 中的关键特性和改进 相较于之前的版本，Vue3 提供了许多新特性和性能上的优化： - **Composition API**: 新增了一种组合逻辑的方式——Setup 函数，它允许开发者更灵活地管理组件状态和行为。 - **Teleport 组件**: 可以将子节点渲染到 DOM 中的不同位置而不影响父级结构。 - **Fragments 片段支持**: 支持返回多个根节点作为模板的一部分。 - **更好的 TypeScript 集成**: 对于使用静态类型系统的开发人员来说更加友好。 对于初学者而言，掌握这些新增加的内容非常重要。 #### 四、实战练习：创建简单的表单验证插件 下面是一个基于 Vue3 构建简单输入框并为其添加引用的例子。这有助于熟悉实际操作过程中的一些细节处理方法[^3]: ```html <template> <div class="form-group"> <label>用户名</label> <input ref="usernameInput" v-model.trim="formData.username" /> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue' const formData = reactive({ username: '' }) onMounted(() => { console.log('获取 input 元素:', (this.$refs['usernameInput'] as HTMLInputElement).value) }) </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值