组件

组件就是可以将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：

我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，并且这个文件可以多次复用

如何定义一个组件

我们可以在项目中定义一个组件、并且在页面上使用，例如：

/src/components/myCompoent.vue

<template>
  <div>
    我是一个组件
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

页面上使用

通过 <script setup>，导入的组件在模板中可直接使用用

组件可以多次重用

<template>
  <div>
    <myCompoent></myCompoent>
    <myCompoent></myCompoent>
    <myCompoent></myCompoent>
  </div>
</template>

<script setup lang="ts">
import myCompoent from '@/components/myCompoent.vue';

</script>

<style scoped>

</style>

组件的生命周期

组件的生命周期也就是一个组件从创建到销毁的过程

注意：在我们使用组合式API是没有 beforeCreate 和 created 这两个生命周期的

onBeforeMount()

在组件被挂载之前被调用

当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程

onMounted()

在组件挂载后执行

组件在以下情况下被视为已挂载：

其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

onBeforeUpdate()

在组件因为响应式状态变更而更新其 DOM 树之前调用，也就是在数据发生更新前调用

onUpdated()

在组件因为响应式状态变更而更新其 DOM 树之后调用，也就是在数据发生更新后调用

onBeforeUnmount()

在组件实例被卸载之前调用。在这个阶段，实例仍然是完全正常的

onUnmounted()

在组件实例被卸载之后调用

选项式api与组合式api生命周期的对比

选项式api	组合式api
beforeCreate	无
created	无
beforeMount	onBeforeUpdate
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

Vue3系列（六）组件与生命周期

组件