Vue3--

一、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.rhkb.cn/news/382327.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于FPGA的YOLOV5s神经网络硬件部署

一 YOLOV5s 本设计以YOLOV5s部署于FPGA上为例进行分析概述。YOLOV5s网络主要包括backbone、neck、head三部分。 涉及的关键算子: Conv:卷积,包括3*3、1*1,stride1/2Concat:Upsample:Pooling:ADD 二 评估 …

独立开发者系列(32)——node开发周边命令

Node环境的本地代码实现了实时开发实时看到效果,但是node在各种情况下,经常容易报错。主要是各种依赖包和环境问题,这个是比较折腾人的。这里将各种常用命令行和开发进行一个整理。 命令行就是我们最常用的winR执行,打开的黑乎乎的窗口。 命…

P4-AI产品经理-九五小庞

从0开始做AI产品的完整工作方法 项目启动 项目实施 样本测试模型推荐引擎 构建DMP(数据管理平台) 项目上线

React 学习——行内样式、外部样式、动态样式

三种样式的写法 import "./index.css"; //同级目录下的样式文件 function App() {const styleCol {color: green,fontSize: 40px}// 动态样式const isBlock false;return (<div className"App">{/* 行内样式 */}<span style{{color:red,fontSiz…

【区块链 + 智慧政务】山东荣成:区块链政务诚信管理系统 | FISCO BCOS应用案例

2018 年 9 月&#xff0c;荣成市政府与山东观海数据技术有限公司合作&#xff0c;基于 FISCO BCOS 区块链技术推动智慧城市建设&#xff0c; 其中&#xff0c;信用管理是智慧城市核心之一。 荣成市区块链政务诚信管理系统&#xff0c;建设信用信息征集、评价、披露和应用于一体…

PY32F071单片机,主频最高72兆,资源丰富,有USB,DAC,运放

PY32F071 系列单片机是基于32 位 ARM Cortex-M0 内核的微控制器&#xff0c;宽电压工作范围的 MCU。芯片嵌入高达 128 Kbytes flash 和 16 Kbytes SRAM 存储器&#xff0c;最高72 MHz工作频率。芯片支持串行调试 (SWD)。PY32F071单片机提供了包含了HAL和LL两种不同层次的驱动库…

Qt SQLite数据库学习总结

到此为止&#xff0c;就使用Qt进行SQLite数据库的操作&#xff0c;做一次总结 1. Qt中数据库操作的相关概念和类 Qt 数据库编程相关基本概念https://blog.csdn.net/castlooo/article/details/140497177 2.表的只读查询--QSqlQueryModel QSqlQueryModel单表查询的使用总结htt…

力扣35题 二分查找(简单易懂)

力扣35题二分查找升级版讲解 文章目录 力扣35题二分查找升级版讲解一、题目描述二、思路第一种方法当然可以遍历 我们这里不做讲解二分查找 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、题目描述 给定一个排序数组和一个目标值&#xff0c…

BGP选路之Local Preference

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时&#xff0c;BGP协议会对这些BGP路由的属性进行比较&#xff0c;以确定去往该目标网络的最优BGP路由。BGP首先比较的是路由信息的首选值&#xff08;PrefVal)&#xff0c;如果 PrefVal相同&#xff0c;就会比较本…

数据结构初阶(C语言)-二叉树-顺序表建堆

一&#xff0c;堆的概念与结构 如果有⼀个关键码的集合&#xff0c;把它的所有元素按完全⼆叉树的顺序存储方式存储&#xff0c;在⼀个⼀维数组中&#xff0c;并满足&#xff1a;&#xff0c;i0,1,2...则称为小堆(或⼤堆)。将根结点最大的堆叫做最大堆或大根堆&#xff0c;根结…

Python爬虫实战案例(爬取图片)

爬取图片的信息 爬取图片与爬取文本内容相似&#xff0c;只是需要加上图片的url&#xff0c;并且在查找图片位置的时候需要带上图片的属性。 这里选取了一个4K高清的壁纸网站&#xff08;彼岸壁纸https://pic.netbian.com&#xff09;进行爬取。 具体步骤如下&#xff1a; …

Unity ShaderLab基础

[原文1] [参考2] 一 基础知识 1. 1 着色器语言分类: 语言说明HLSL基于 OpenGL 的 OpenGL Shading LanguageGLSL基于 DirectX 的 High Level Shading LanguageCGNVIDIA 公司的 C for GraphicShader LabUnity封装了CG,HLSL,GLSL的Unity专用着色器语言,具有跨平台,图形化编程,便…

Java面试八股之Spring boot的自动配置原理

Spring boot的自动配置原理 Spring Boot 的自动配置原理是其最吸引人的特性之一&#xff0c;它大大简化了基于 Spring 框架的应用程序开发。以下是 Spring Boot 自动配置的基本原理和工作流程&#xff1a; 1. 启动类上的注解 Spring Boot 应用通常会在主类上使用 SpringBoot…

react中路由跳转以及路由传参

一、路由跳转 1.安装插件 npm install react-router-dom 2.路由配置 路由配置&#xff1a;react中简单的配置路由-CSDN博客 3.实现代码 // src/page/index/index.js// 引入 import { Link, useNavigate } from "react-router-dom";function IndexPage() {const …

elasticsearch-7.3.1安装注意事项

elasticsearch-7.3.1安装注意事项 一、背景二、步骤1、查看原ES版本2、新环境服务器2.1、是否有elasticsearch2.2、安装elasticsearch2.3、配置参数2.4、启动elasticsearch2.5、设置密码 三、报错-问题总结1、jdk不适用2、bootstrap checks failed3、Address already in use4、…

栈和队列(C语言)

栈的定义 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#xff1a;…

20分钟上手新版Skywalking 9.x APM监控系统

Skywalking https://skywalking.apache.org/ Skywalking是专为微服务、云原生和基于容器的&#xff08;Kubernetes&#xff09;架构设计的分布式系统性能监控工具。 Skywalking关键特性 ● 分布式跟踪 ○ 端到端分布式跟踪。服务拓扑分析、以服务为中心的可观察性和API仪表板。…

【stm32项目】基于stm32智能宠物喂养(完整工程资料源码)

基于STM32宠物喂养系统 前言&#xff1a; 随着人们生活幸福指数的提高&#xff0c;越来越多的家庭选择养宠物来为生活增添乐趣。然而&#xff0c;由于工作等原因&#xff0c;许多主人无法及时为宠物提供充足的食物与水。为了解决这一问题&#xff0c;我设计了一款便捷的宠物喂…

linux C++ onnxruntime yolov8 视频检测Demo

linux C onnxruntime yolov8 视频检测Demo 目录 项目目录 效果 ​编辑CMakeLists.txt 代码 下载 项目目录 效果 ./yolov8_demo --help ./yolov8_demo -c2 -ptrue ./yolov8_demo -c1 -strue CMakeLists.txt # cmake needs this line cmake_minimum_required(VERSION 3…

vim gcc

vim 使用 vs filename 分屏 ctrl ww 切窗口 shift zz 快速提出vim vim配置 vim启动时自动读取当前用户的家目录的.vimrc文件 vim配置只影响本用户 其他用户观看同一文件不受影响 gcc指令 & c文件编译过程 动态库 静态库 & 链接方式 有相应库才能进行…