当前位置: 首页 > news >正文

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、其他

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 设计模式 C++简单工厂简单例子
  • github的Codespaces是什么
  • Scikit-learn简介
  • k8s多集群管理工具kubecm
  • 【leetcode】两数之和【简单】( 注释详解:C++map/ C哈希表)
  • 高级java每日一道面试题-2024年7月27日-并发篇-Thread类中的yield方法有什么作用?
  • 基于STM32的多协议通信系统设计与实现
  • 知,已经在行;知行是一件事,不是两件事
  • 大厂面试官问我:ConcurrentHashMap底层原理?【后端八股文十五:Java集合合集】
  • 从 Pandas 到 Polars 三十八:Polars 的“瘦身”功能
  • GPU驱动、CUDA 、cuDNN 和CUDA Toolkit之间的关系(深度学习小白必懂)
  • Linux Gui 窗口对话和窗口操作
  • opencascade AIS_Manipulator源码学习
  • Pytorch 9
  • dsp c6657 SYS/BIOS学习笔记
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • export和import的用法总结
  • React+TypeScript入门
  • Ruby 2.x 源代码分析:扩展 概述
  • spring-boot List转Page
  • Travix是如何部署应用程序到Kubernetes上的
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • Vue2.0 实现互斥
  • 阿里云Kubernetes容器服务上体验Knative
  • 复习Javascript专题(四):js中的深浅拷贝
  • 给自己的博客网站加上酷炫的初音未来音乐游戏?
  • 前端存储 - localStorage
  • 全栈开发——Linux
  • 它承受着该等级不该有的简单, leetcode 564 寻找最近的回文数
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 线性表及其算法(java实现)
  • 新版博客前端前瞻
  • 学习笔记TF060:图像语音结合,看图说话
  • 中文输入法与React文本输入框的问题与解决方案
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • ​如何在iOS手机上查看应用日志
  • #git 撤消对文件的更改
  • #NOIP 2014# day.2 T2 寻找道路
  • #pragma pack(1)
  • (1)(1.9) MSP (version 4.2)
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (七)MySQL是如何将LRU链表的使用性能优化到极致的?
  • (十六)串口UART
  • (四)activit5.23.0修复跟踪高亮显示BUG
  • (四)c52学习之旅-流水LED灯
  • (原)记一次CentOS7 磁盘空间大小异常的解决过程
  • (原創) 是否该学PetShop将Model和BLL分开? (.NET) (N-Tier) (PetShop) (OO)
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • (转载)OpenStack Hacker养成指南
  • .NET Core IdentityServer4实战-开篇介绍与规划
  • .net core 控制台应用程序读取配置文件app.config
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost