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