这是 Vue3 + Vite + Pinia +TS + Element-Plus 实战系列文档。最近比较忙没什么时刻写文章，争夺早日把这个系列完毕吧~
生命周期和模板引证
在本章之前，咱们经过呼应式 api 和声明式烘托，处理了 DOM 的更新，但光是这些，关于一些杂乱的需求手动操作 DOM 的状况，之前介绍的就无法满足了。
生命周期
每个 Vue 组件在创建时经历的一系列初始化步骤的阶段，咱们需求在这些阶段做额定操作的话，需求调用对应阶段的钩子。
这些阶段包括：设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改动时更新 DOM 等。Vue 官方给出了图示，能够协助咱们更好的了解生命周期：
- setup：赤色的一切生命周期 API 都在组件的 setup() 阶段被同步调用。
- 赤色方框：不同阶段代表的生命周期，后续咱们写的 生命周期钩子 会在此阶段履行。
- 主轴上的：代表组件从初始化到卸载的首要事情。
这里咱们先简单介绍，在介绍完生命周期钩子之后，相信你会更了解这张图。
生命周期钩子
了解了上述的生命周期，咱们想在对应的周期做一些工作的话，在 Vue3 中咱们运用 onXxx 的生命周期钩子，例如：
假如你运用过 Vue2 的话，你会发现不同：
运用办法就如前面写的，在 setup 中，在生命周期 API 中注入回调就能够了。这里咱们就不去做 Vue2 和 Vue3 的对比了，全当新学的，按照生命周期的顺序：
- setup：beforeCreate 和 created 被 setup 办法代替。
- onBeforeMount() ：在组件被挂载之前履行回调。组件现已完成了其呼应式状况的设置，但还没有创建 DOM 节点。
- onMounted() ：在组件挂载完成后履行回调。一般用于履行需求拜访组件所烘托的 DOM 树相关的副效果。
- onBeforeUpdate() ：在组件即将因为呼应式状况改动而更新其 DOM 树之前履行回调。一般用来在 Vue 更新 DOM 之前拜访 DOM 状况。
- onUpdated() ：在组件因为呼应式状况改动而更新其 DOM 树之后履行回调。会在组件的恣意 DOM 更新后被调用，一般用来拜访更新后的 DOM，不能在此做更新 DOM 的操作，可能导致循环。
- onBeforeUnmount() ：在组件实例被卸载之前履行回调。
- onUnmounted() ：在组件实例被卸载后履行回调。一般用于手动清理一些副效果，例如计时器、DOM 事情监听器或许与服务器的衔接。
- onActivated() ：当作为 keep-alive 组件被激活时履行回调。
- onDeactivated() ：当作为 keep-alive 组件被撤销激活时履行回调。
- onErrorCaptured() ：在捕获了子孙组件传递的错误时履行回调。一般用来更改组件状况来为用户显现一个错误状况。
- onRenderTracked() 仅开发形式运用 ：当组件烘托过程中追寻到呼应式依赖时履行回调。一般用于追寻依赖的调试。
- onRenderTriggered() 仅开发形式运用 ：当呼应式依赖的改动触发了组件烘托时履行回调。一般用于触发更新的调试。
以上便是一切的生命周期以及其可被调用的生命周期钩子，咱们在上述钩子中传递回调，Vue 会在其地点的生命周期触发。
模板引证 ref
ref 用于注册元素或许子组件的引证。
模板引证将存储在与名字匹配的 ref 中，例如想在数据加载完之后，更改文字信息或描述信息：
当然咱们也完全能够让上述的代码中 h2 变成呼应式的，并在h2中运用 {{}} 模板语法完成。
组件引证ref
ref 也能够运用在子组件上，相对来说也是较为常见的用法。
首要解释什么是组件：
在此之前咱们都是运用的一个单文件App.vue，假如一个项目将代码全写在这一个文件，那将非常难维护，于是咱们把可复用等的页面组件化，页面和逻辑抽离，经过导入组件被其它页面引证。
运用 ref，父组件能获取子组件示例：
需求留意的是，子组件没有运用
假如运用
当然在大部分状况下，运用 props 和 emit 就能完成父子组件的交互，而无需运用 ref。
组件传值 props
组件之间传值的方法首要能够概括为这三类：父子组件传值、兄弟组件传值和远亲组件传值。
Vue 供给给咱们组件传值的api有两种：props、emit。其间咱们能够经过 props 进行父=>子组件传值。
在开发过程中，咱们需求经过 defineProps() 清晰子组件的 props。父组件能够像声明 HTML 参数一样传值，也能够运用 : (v-bind 简写) 动态传值：
defineProps() 声明之后，其间的数据就能够在子组件模板中运用。在 JavaScript 中拜访则需求经过 defineProps() 回来的目标拜访。
留意：
- props 是只读的，遵循单项数据流，当尝试修改 props 会正告 prop 只读。
- js 中定义数据与 props 中重名时，运用的是 js 中定义的。
const activeMsg = “hl”;
activeMsg: {{ activeMsg }}
- props 供给校验选项，保证项目没有运用 TypeScript 进行类型检测，也能够承认必定的数据类型，避免不不满足类型要求的数据传入。（现在 Vue3 支撑 TypeScript 能够说这个用处不大了）
interface DataProps {
msg: String;
activeMsg: String;
}
const props = defineProps();
组件监听事情 emit
子组件运用 emit() 向父组件传递数据。第一个参数是事情称号，其它额定参数都会被直接传向父组件的监听器函数。
父组件运用 @ （v-on）监听子组件时刻，而且能够接收子组件传递的参数。
留意：
- 在模板中能够运用 $emit 的语法，js中只能运用 defineEmits 回来目标 emit 触发事情。
- 能够运用类型标示触发事情，对触发的事情有更精准的操控。
const emit = defineEmits<{
(e: ‘response’, msg: string): void
}>()
传递模板-插槽 slot
除了传递数据外，父组件还能够经过插槽 slot 的方法将模板传递给子组件。
默许内容
假如想设置默许内容的话，比方在父组件不向子组件传递模板字符，而运用子组件按钮内容有默许 content：
签字插槽
假如组件包括多个插槽出口，则需求运用签字插槽，用来给插槽一个唯一 ID，以承认不同出口要烘托的内容。
v-slot 能够简写为 # ，v-slot:header => #header。而且v-slot 也能够接受动态参数（动态插槽名）: #[dynamicSlotName] 。
效果域插槽
上述的几种插槽，无法拜访到子组件的状况，在某些场景中咱们想要子组件传递数据给插槽，效果域插槽就能够满足这个需求。
精确来说，上述比方是签字效果域插槽。假如是一般的效果域插槽，即改动 template 的签字插槽为一般插槽就能够了。
实战
前几节讲到了组件的各生命周期钩子、组件传值的 props、触发事情的 emit 以及模板插槽 slot，用的比方比较简单，咱们经过实战体验一下在实战开发中的运用，协助咱们更好的了解和运用。
博客的列表展现功用，供给分类功用。
- 分类的数据来源于父组件，其选择的类型经过回调奉告父组件。
- 列表部分父组件做元素内容和样式的操控，子组件做列表的基础循环等的通用操作。
示例尽可能的包括到咱们这章所学常识，如下述代码部分看不懂，代表你那部分常识还没了解清楚。
本节中的比方里包括部分ts的类型承认
父组件App.vue：
父组件涉及常识点：
- 与 ClassifyHeader 分类组件的传值。props 和 emit。
- 生命周期 onMounted。在组件挂载后恳求数据。
- 组件引证 ref 。运用子组件的办法。
- 签字效果域插槽。
父组件和分类组件
在父组件中，初始的tags.list值经过 props 传递给子组件，一起监听了 select 事情。select 触发会履行 checkedTags 函数，父组件得到 checked 值，并做出从头恳求列表数据的操作。
components/ClassifyHeader.vue分类组件：
ClassifyHeader 分类组件首要便是记录所选类别，并经过 emit 传递数据给父组件。
父组件与列表组件
父组件经过 ref 获取到子组件示例，而且运用子组件露出的 loadData 办法加载数据。子组件经过效果域插槽，传递数据给父组件，父组件操控内容布局。
components/Children.vue列表组件：
子组件，供给签字插槽 slot 以及用 defineExpose 抛出 loadData 办法供父组件经过组件示例拿到。
上述比方，咱们就把大部分的常识都从头实战温习了一遍，主张能够把这几个代码自己写一遍，加深形象。
其它传值方法
除了上述的 props、emit 父子组件传值之外。还能够运用依赖注入 API ：provide、inject。
- provide() ：供给一个值，能够被子孙组件注入。运用方法：provide(/* 注入名 / ‘message’, / 值 */ ‘hello!’) 。
- inject() ：注入上层组件供给的数据。运用方法：const message = inject(‘message’) 。
兄弟组件，能够能够经过父组件操控数据传值。
关于跨组件通信，咱们能够运用状况办理工具，比方咱们后面要学的 Pinia，便是一个状况办理结构。
总结
本章中，咱们首要结合 Vue 的生命周期的流程图，例举了各个生命周期钩子的触发机遇，以及部分钩子的运用场景。然后讲到了 ref 的效果，最后讲完并实战了组件通信相关的 api。
至此 Vue3 的基础常识到这里现已完毕了，还剩下一小部分，留在咱们实战课程中探究。
假如未学习过TypeScript的话，我也准备了 TypeScript 相关的入门基础常识，课程不会很长，带我们了解 TypeScript 常用的一些常识，为实战做准备。
