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