Article directory
Vue3 component learning
1. Basic concepts
1.1. The concept and function of components
-
Components in Vue are a kind of components
可复用的代码单元that can encapsulateHTMLand code, so that we can better organize and manage code, and can improve theCSSsum of code .JavaScript复用性可维护性 -
A component can be understood as a part of the page, which can accept input (
props) and output (events), and can implement its own logic and functions inside the component. Components can be used to split a large application into小型的multiple独立的components方便管理和维护. -
In Vue3, there are two implementations of components:
单文件组件and对象式组件. Single-file components are a way to encapsulateHTML,CSSandJavaScriptcode into a single file, which allows for better organization and management of code, and enables the use of precompilers and modularization tools.对象式组件is a way of usingJavaScriptobjects to define components, it's simpler, however不够灵活. -
Components in Vue can contain the following parts:
- Template (
template):HTMLThe code of the component, which is used to render the content of the component. - Style (
style):CSSthe code of the component, used to define the style of the component. - Script (
script):JavaScriptthe code of the component, used to implement the logic and functions of the component. - Attribute (
props): The component receives输入数据, which can be any type of data. - Event (
events): Triggered by the component输出事件, it can be any type of event.
- Template (
Example 1: Single file component
The file format of a single-file component is usually .vuethat it contains three parts, represented by <template>, <style>and <script>tags respectively. For example:
<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>
Example 2: Object Components (below is an example from official documentation)
The template here is an inline JavaScriptstring, and Vue will 运行时compile it. You can also use an ID selector to point to an element (usually a native <template>element), and Vue will use its content as a template source.
The following example defines a component and .jsexports itself in a file by default, but you can also export multiple components in a file by using named exports.
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. Classification and usage scenarios of components
In Vue, components can be divided into the following two categories according to their functions and reusability:
1.2.1. Basic components
The basic component is a general-purpose, reusable component, which has 较高and 复用性can 普适性be in 多个应用程序中被重复使用. Basic components usually contain some common UI elements, such as 按钮, 输入框, 标签, 面包屑and so on. Base components can be characterized as 独立使用, 不依赖于其他组件, and also 不依赖于应用程序的业务逻辑.
1.2.2. Business components
A business component is a component that is 具体业务designed according to requirements and has certain 复杂性components, and it usually contains some specific UI元素and 业务逻辑. The characteristics of business components can be 满足具体的业务需求, but for 其他应用程序可能不适用. Business components usually depend on other components and applications that 业务逻辑need to be used 特定的业务场景under .
1.3. Component life cycle hook function
Concept: Simply put, the process of创建 a component from to is called销毁生命周期
Note: When we use Vue3the combined API, there is no connection beforeCreatewith createdthese two life cycles
| optionAPI | compositionAPI | effect |
|---|---|---|
| beforeCreate | none | Executed before component creation |
| created | none | Executed after component creation |
| beforeMount | onBeforeMount | Executed before the component is mounted |
| mounted | onMounted | Executed after the component is mounted |
| beforeUpdate | onBeforeUpdate | Executed before component update |
| updated | onUpdated | Executed after component update |
| beforeUnmount | onBeforeUnmount | Executed before the component is unmounted |
| unmounted | onUnmounted | Executed after the component is unmounted |
| errorCaptured | onErrorCaptured | Called when an error passed by a descendant component has been caught |
| renderTracked | onRenderTracked | Reactive dependencies are called after being tracked by the component's render action. Only available in development mode |
| renderTriggered | onRenderTriggered | Reactive dependencies are called after the component triggers a re-render. Only available in development mode |
| activated | onActivated | The component instance is <KeepAlive>part of the cache tree, called when the component is inserted into the DOM |
| deactivated | onDeactivated | The component instance is <KeepAlive>part of the cache tree, called when the component is removed from the DOM |
Example 1: 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>
Example 2: 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>
Summarize
The above is the Vue3 component, which includes the basic concept of the component, the life cycle hook function of the component and so on.