Vue 3 第十章：组件一（基本概念、生命周期钩子）

Vue3组件学习

1. 基本概念

1.1. 组件的概念和作用

• Vue中的组件是一种可复用的代码单元，它可以封装HTML、CSS和JavaScript代码，使得我们可以更好地组织和管理代码，并且可以提高代码的复用性和可维护性。

• 组件可以理解为页面的一部分，它可以接受输入（props）和输出（events），并且可以在组件内部实现自己的逻辑和功能。使用组件可以将一个大型应用程序拆分成多个小型的、独立的组件，从而方便管理和维护。

• 在Vue3中，组件有两种实现方式：单文件组件和对象式组件。单文件组件是一种将HTML、CSS和JavaScript代码封装到一个文件中的方式，它可以更好地组织和管理代码，并且可以使用预编译器和模块化工具。对象式组件是一种使用JavaScript对象来定义组件的方式，它比较简单，但是不够灵活。

• Vue中的组件可以包含以下几个部分：

  • 模板（template）：组件的HTML代码，用于渲染组件的内容。
  • 样式（style）：组件的CSS代码，用于定义组件的样式。
  • 脚本（script）：组件的JavaScript代码，用于实现组件的逻辑和功能。
  • 属性（props）：组件接收的输入数据，可以是任何类型的数据。
  • 事件（events）：组件触发的输出事件，可以是任何类型的事件。

例子1：单文件组件

单文件组件的文件格式通常是.vue，它包含了三个部分，用<template>、<style>和<script>标签分别表示。例如：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const msg = ref('Welcome to Your Vue.js App');
</script>

<style scoped>
.hello {
  color: red;
}
</style>

例子2：对象组件（下面是一个官方文档的例子）

这里的模板是一个内联的JavaScript字符串，Vue 将会在运行时编译它。你也可以使用 ID 选择器来指向一个元素 (通常是原生的<template>元素)，Vue 将会使用其内容作为模板来源。

下面的例子中定义了一个组件，并在一个.js文件里默认导出了它自己，但你也可以通过具名导出在一个文件中导出多个组件。

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
  // 或者 `template: '#my-template-element'`
}

1.2. 组件的分类和使用场景

在Vue中，组件可以按照其作用和复用性的不同分为以下两类：

1.2.1. 基础组件

基础组件是一种通用的、可复用的组件，它具有较高的复用性和普适性，可以在多个应用程序中被重复使用。基础组件通常包含一些通用的UI元素，例如按钮、输入框、标签、面包屑等。基础组件的特点是可以独立使用，不依赖于其他组件，也不依赖于应用程序的业务逻辑。

1.2.2. 业务组件

业务组件是一种针对具体业务需求而设计的、具有一定复杂性的组件，它通常包含一些特定的UI元素和业务逻辑。业务组件的特点是可以满足具体的业务需求，但是对于其他应用程序可能不适用。业务组件通常依赖于其他组件和应用程序的业务逻辑，需要在特定的业务场景下使用。

1.3. 组件的生命周期钩子函数

概念：简单来说就是一个组件从创建 到 销毁的 过程 称为生命周期

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

optionAPI	compositionAPI	作用
beforeCreate	无	组件创建之前执行
created	无	组件创建之后执行
beforeMount	onBeforeMount	组件挂载之前执行
mounted	onMounted	组件挂载之后执行
beforeUpdate	onBeforeUpdate	组件更新之前执行
updated	onUpdated	组件更新之后执行
beforeUnmount	onBeforeUnmount	组件卸载之前执行
unmounted	onUnmounted	组件卸载之后执行
errorCaptured	onErrorCaptured	在捕获了后代组件传递的错误时调用
renderTracked	onRenderTracked	响应式依赖被组件的渲染作用追踪后调用。 仅在开发模式下可用
renderTriggered	onRenderTriggered	响应式依赖被组件触发了重新渲染之后调用。 仅在开发模式下可用
activated	onActivated	组件实例是<KeepAlive>缓存树的一部分， 当组件被插入到 DOM 中时调用
deactivated	onDeactivated	组件实例是<KeepAlive>缓存树的一部分， 当组件从 DOM 中被移除时调用

例子一：optionAPI

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log(`组件创建之前-beforeCreate`)
  },
  created() {
    console.log(`组件创建之后-created`)
  },
  beforeMount() {
    console.log(`组件挂载之前-beforeMount`)
  },
  mounted() {
    console.log(`组件挂载之后-mounted`)
  },
  beforeUpdate() {
    console.log(`组件更新之前-beforeUpdate`)
  },
  updated() {
    console.log(`组件更新之后-updated`)
  },
  beforeUnmount() {
    console.log(`组件卸载之前-beforeUnmount`)
  },
  unmounted() {
    console.log(`组件卸载之后-unmounted`)
  }
}
</script>

例子二：compositionAPI

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script setup lang="ts">
  import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
  } from 'vue'

  onBeforeMount(() => {
    console.log(`组件挂载之前-onBeforeMount`)
  })
  onMounted(() => {
    console.log(`组件挂载之后-onMounted`);
  })
  onBeforeUpdate(() => {
    console.log(`组件更新之前-onBeforeUpdate`);
  })
  onUpdated(() => {
    console.log(`组件更新之后-onUpdated`);
  })
  onBeforeUnmount(() => {
    console.log(`组件卸载之前-onBeforeUnmount`);
  })
  onUnmounted(() => {
    console.log(`组件卸载之后-onUnmounted`);
  })
</script>

总结

以上是Vue3组件，其中包括了组件的基本概念、组件的生命周期钩子函数等内容。