携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

定义

组件（Component）是 Vue.js 最强大的功能之一，每个vue文件都可以看做是一个组件。组件可以扩展 HTML 元素，封装可重用的代码。把页面（html代码，CSS代码）代码进行模块化就是vue组件最重要的功能。

步骤

vue.js中创建组件有三个步骤：定义组件，注册组件以及使用组件

分类

根据组件的功能及范围可以将组件分为:

• 全局组件:只是通过 component 全局注册,全局注册的组件可以在之后创建的 app 实例模板中使用，同时也包括根实例组件树中的所有子组件的模板中
• 局部组件:只能在当前vue实例中使用，写法建议首字母大写，单词间使用驼峰命名

生命周期:

组件的生命周期就是组件从注册到销毁的过程,可以通过钩子函数来监听各个周期的操作，钩子函数如下:

• vue3 使用组合式API，setup 这个函数是在beforeCreate和created之前运行的,所以可以用它来代替这两个钩子函数，创建的是data和method
• onBeforeMount():组件挂载到节点上之前,DOM实际渲染安装之前调用。此时，根元素还不存在。
• onMounted():在组件挂载完成后，第一次渲染后调用，可以直接访问DOM
• onBeforeUpdate():组件更新时调用，发生在虚拟 DOM 打补丁之前。
• updated():组件更新完成之后，updated的方法即会调用。
• onBeforeUnmount():在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
• onUnmounted():卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
• onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数，被激活时执行
• onDeactivated(): 切换到一个组件且上一组件消失时执行
• onErrorCaptured(): 当捕获一个来自子孙组件的异常时执行