这是我参与「第五届青训营」伴学笔记创作活动的第 17 天，今天在开发青训营大项目的过程中，继续学习了如何从头开发一个 Vue 3 的项目，包括 Vue 3 的基础语法等。
依赖注入
依赖注入可以解决后代组件调用祖先组件的数据时，需要父子组件直接 prop 逐级透传的问题。
基本思想：
- 一个祖先组件相对于其所有的后代组件，会作为依赖提供者。
- 后代组件可以注入祖先组件提供的依赖。
Provide (提供)
祖先组件要为后代组件提供数据，需要使用到 provide() 函数：
在 <script setup> 中，导入 provide，然后使用 provide() 函数传入注入名和注入的值。
注入名为字符串。
import { ref, provide } from 'vue'
const count = ref(0)
provide('key', count)
使用 readonly() 来包装提供的值，可以使得注入值只读。
import { ref, provide, readonly } from 'vue'
const count = ref(0)
provide('read-only-count', readonly(count))
Inject (注入)
后代组件要使用祖先组件提供的数据，需使用 inject() 函数：
在 <script setup> 中，导入 inject，然后使用 inject() 函数传入注入名，即可返回注入值。
import { inject } from 'vue'
const message = inject('message')
和 props 类似，注入值可以有默认值：
const value = inject('message', '这是默认值')
Vue 过渡动画
单个组件的过渡动画
<Transition> 是一个内置组件，会在内部元素离开或者进入时，为内部元素加上 CSS class 来执行过度动画。在 CSS 中指定这些 class 的样式来定义过渡动画的效果。
在 <Transition> 中指定 name 属性来定义过渡动画的名称。
在不同时机，Vue 会为内部元素加上下列 CSS class，其中 * 为过渡动画的名称：
进入时动画：
*-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。*-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。*-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
离开时动画：
*-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。*-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。*-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。
列表中多个组件的过渡动画
列表中的元素需要过渡动画时可以使用 <TransitionGroup> 实现。
<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。
