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组件,其中包括了组件的基本概念、组件的生命周期钩子函数等内容。