Vue3--

news2024/11/23 17:04:11

一、pinia (集中式状态(数据)管理)

1、准备一个效果

2、存储+读取数据

3、修改数据三种方式

4、storeToRefs 

5、getters

当state中的数据,需要经过处理后在使用时,可以使用getters配置

6、$subscribe的使用

lovetalk.Vue

lovetalk.ts

7、store 组合式写法

选项式写法

二、组件通信

组件之间相互传递信息

方式1、props 

方式2、自定义事件

方式3:mitt

pubsub 

$bus

mitt

接收数据的:提前绑定好事件(提前订阅消息)

提供数据的:在合适的时候触发事件(发布消息)

方式四:v-model

$event啥时候能  .target

对于原生事件,$event 就是事件对象,能.target

对于自定义事件,$event就是触发事件时,所传递的数据不能 .target

方式五:$attrs

6、$refs、$parent

father.vue

child1.vue

当访问obj.c 的时候,底层会自动读取value属性,因为c是在obj这个响应式对象中

7、provide、inject

father.vue

grandchild.vue

三、插槽

默认插槽

具名插槽

作用域插槽

由子组件去维护自己所有数据结构等等交互,但呈现什么样的结构由父组件决定

四、其他API

1、shallowRef  与  shallowReactive

2、readonly  与  shallowReadonly

shallowReadonly与readonly 类似,但只作用于对象的顶层属性

3、toRaw 与  markRaw

toRaw 

用于获取一个响应式对象的原始对象,toRaw  返回的对象不再是响应式的,不会触发视图更新,

markRaw 

标记一个对象,使其永远不会变成响应式的

4、customRef

作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行逻辑控制。

五、Vue3新组件

1、Teleport

这是一种能够将我们的 组件html结构 移动到指定位置的技术

 

2、Suspense

等待异步组件时渲染一些额外内容,让应用有更好的用户体验

使用步骤:

异步使用组件

使用 Suspense 包裹组件,并配置好 default 与 fallback

3、全局API转移到应用对象

4、其他

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

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

相关文章

QT总结——图标显示坑

最近写代码遇到一个神仙大坑,我都怀疑我软件是不是坏了,这里记录一下。 写qt工程的时候我们一般会设置图标,这个图标是窗体的图标同时也是任务栏的图标,但是我发现生成的exe没有图标,这个时候就想着给他加一个图标&…

Linux(CentOS)的“应用商城” —— yum

Linux(CentOS)的“应用商城” —— yum 关于 yum 和软件包Linux 系统(CentOS)的生态yum 相关操作yum 本地配置yum 安装 lrzsz.x86_64 关于 yum 和软件包 首先 yum 是软件下载安装管理的客户端,类似各种手机里的“应用…

OpenAI发布GPT-4 Mini的深度分析及中国大模型的弯道超车机会

引言 在OpenAI封禁中国IP访问其API后,紧接着推出了GPT-4 Mini,这是一个引发广泛关注和讨论的新举措。此举不仅让人们质疑OpenAI的战略方向,更引发了对中国大模型是否能弯道超车的讨论。本文将详细分析GPT-4 Mini的特点、市场影响及中国大模型…

eclipse中的classbean导入外部class文件,clean项目后删除问题

最近被eclipse搞得头疼,下午终于解决 eclipse创建的java项目中,类的输出目录是classbean。由于项目需要,classbean目录下已经导入了外部的类,但每次clean项目时,会把class删掉。 广泛查询,eclipse不清空c…

jenkins删除历史构建记录

1、 登录jenkins,进入【Manage Jenkins】-【Script Console】,输入: def jobName "Test" //删除的项目名称 def maxNumber 60 // 保留的最小编号,意味着小于该编号的构建都将被删除 Jenkins.instance.getItemByFullN…

javascript鼠标跟随星星动画特效

鼠标跟随星星动画特效https://www.bootstrapmb.com/item/14781 创建一个鼠标跟随的星星动画特效在JavaScript中通常涉及到HTML、CSS和JavaScript的结合。以下是一个简单的步骤说明和示例代码,用于创建一个基本的鼠标跟随星星动画: HTML (index.html) ht…

从理论到实践:如何用 TDengine 打造完美数据模型​

在用 TDengine 进行数据建模之前,我们需要回答两个关键问题:建模的目标用户是谁?他们的具体需求是什么?在一个典型的时序数据管理方案中,数据采集和数据应用是两个主要环节。如下图所示: 对于数据采集工程师…

大数据-44 Redis 慢查询日志 监视器 慢查询测试学习

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…

基于Java+SpringMvc+Vue技术的慈善捐赠平台设计与实现(源码+LW+部署讲解)

项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功以及课程答疑! 软件开发环境及开发工具: 操作系统:Windows 10、Windows 7、Windows 8 开发语言:java 前端技术:JavaScript、VUE.j…

好玩新游:辛特堡传说中文免费下载,Dungeons of Hinterberg 游戏分享

在游戏中,你将扮演Luisa,一个被现实生活拖得疲惫不堪的法律实习生。她决定暂时远离快节奏的公司生活,踏上征服辛特堡地下城的旅程…她会在第一天就被击退,还是能成为顶级猎魔人呢?只有一个办法可以找到答案... 体验刺激…

MATLAB练习题——矩阵(2)

逻辑运算 a [5 0.2 0 -8 -0.7 ],在进行逻辑运算时,a 相当于什么样的逻辑量。 相当于 a[1 1 0 1 1] 角度运算 在 sin(x)运算中,x 是角度还是弧度? 在 sin(x)运算中,x 是弧度,MATLAB 规定所有…

nfs服务器+配置autofs自动挂载

在服务端 在客户端 [rootlocalhost ~]# showmount -e 192.168.231.129 Export list for 192.168.231.129: /data 192.168.231.130 配置autofs自动挂载 在一般 NFS 文件系统的使用过程中,如果客户端要使用服务端所提供的文件系统,可以在 /etc/rc.d/rc.l…

AI智能绘画对话系统搭建部署,文字转视频,文案创作系统

目录 前言: 一、AI创作系统 二、AI系统功能 三、系统技术架构 五、如何搭建部署 总结 前言: AI创作系统,涵盖文案创作、绘画和对话系统。 一、AI创作系统 AI创作系统是一种利用人工智能技术,辅助或完全自动化内容创作过程…

Apache DolphinScheduler 3.2.2 版本正式发布!

Apache DolphinScheduler 3.2.2 版本正式发布! 近日,Apache DolphinScheduler 发布了 3.2.2 版本。此版本主要基于 3.2.1 版本进行了 bug 修复,新增若干特性,并进行了众多改进和 Bug 修复,以及文档修复等。 &#x1…

培训第十二天(samba共享与DNS域名解析)

上午 samba与nfs都是用于局域网 1、安装samba软件 (1)关闭防火墙与selinux [rootsamba ~]# systemctl stop firewalld[rootsamba ~]# setenforce 0[rootsamba ~]# systemctl disable firewalld[rootsamba ~]# vim /etc/selinux/config (…

SDWAN跨境网络专线如何帮助企业运营社交媒体平台如Facebook、Twitter等

在全球化日益加深的今天,越来越多的企业选择通过社交媒体平台如Facebook、Twitter等进行品牌推广和引流。然而,跨境访问这些平台时,网络延迟、连接不稳定、IP地址被封禁等问题常常困扰着企业,严重影响了其运营效率和推广效果。为了…

STM32智能楼宇管理系统教程

目录 引言环境准备智能楼宇管理系统基础代码实现:实现智能楼宇管理系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:楼宇管理与优化问题解决方案与优化收尾与总结 1. 引言 智能楼宇管理系统通…

杰发科技Bootloader(1)—— Keil配置地址

IAP方式 BootLoader方式 UDSBoot方式 AC7801的地址分配 用户空间的的地址从8000000开始分配,大小是64页,即128K。 RAM地址从20000000开始 基于UDSboot调试-Boot 烧录Boot之后,ATClinkTool无法连接 用keil查看内存,地址到8005388…

spring部分源码分析及Bean的生命周期理解

前言: 本文整体框架是通过refresh方法这个入口进入分析:分析IOC容器的创建及一些Bean的生命周期的知识点,写得确实一般般,感觉自己的有些前置知识并没有理解的很到位,所以,这篇文件先记录一下,…

go语言day14 bufio包 ioutil包

Golang-100-Days/Day16-20(Go语言基础进阶)/day16_file操作.md at master rubyhan1314/Golang-100-Days GitHub 一、bufio包 读写文件 1) bufio包下的Reader类实现了Read()方法和Write()方法 2)和io包相比,虽然都是在读写文件,…