【Vue3 基础】05.组件化-六虎

这是 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 常用的一些常识，为实战做准备。

【Vue3 基础】05.组件化